Reputation: 41
Resize table column with fixed header in jquery
I have table with horizontal and vertical scroll where header is fixed. As I'm using fixed header the clone is generated for header so the resizing is not working on it. I need to resize the table columns also. Please help me...
Here is the code : http://jsfiddle.net/manishan/Hx7ak/
Upvotes: 4
Views: 8819
Answers (6)
Reputation: 73906
**Useful jQuery Plugins for Working with Tabular or table-based content ** (include re-sizable columns and fixed header)
jQuery DataTables table-plugin (See Jean Paul's answer ;) )
OCT 28 2015: Edited due one link being unavailable for future reference.
Upvotes: 4
Reputation: 1
Just Use below line of code That will work.
$(window).on('resize', function () { $('.fixedHeader').remove(); new $.fn.dataTable.FixedHeader(table); });
Upvotes: -1
Reputation: 1
@Luv / Not sure if I understood fully your reference to excel.exe vs the resize with a mouse drag scenario described in your question, but I will try to respond with what I have been able to work with so far in regards to DataTables plus some reading and considerations while browsing their website (http://www.datatables.net)
There is a very cool plugin (haven't tried it myself) that allows you to do CRUD (Create-Read-Update-Delete cycle of programming.. In case that you are working with some local storage or a DB based approach for holding your applications Data) Furthermore, I can't really guess which is the functionality that you are finally aiming to, here are some thoughts to consider:
Paid Plugin for DataTables (Editor plugin)
http://editor.datatables.net/release/DataTables/extras/Editor/examples/events_keySubmit.html
Costs like $15 bucks for the license, if I am not mistaken, but comes built-in with a bunch of ready for CRUD developing api, which seems really cool.. I think that it uses some sort of facebox modal window opening on triggered events. Worth a try!
If you are wanting to edit the DataTables inline, I think that there is a plugin for that
http://datatables.net/release-datatables/examples/api/editable.html
(dataTables created by Allan Jardine appears to be very supported by it's community and I would suggest that if you are planning on developing with it, you ought to become a regular at their forums, or posts questions to Allan as far as if that desired functionality you are looking for has been developed for this current stable version of his interesting work).
On the other hand, if what you are looking for is to edit the columns width as a jQuery UI resizable method, I believe that you need to hook the function redraw, and write a custom extension of something like this example:
http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html
Also, you might be interested in looking at: (http://jqueryui.com/resizable/) to learn more about how you can prototype reworking the columns on fnReDraw (which is very useful for hooking events when we use the sort by or filtering options from DaTatables) with some chained events programming.
I have not tried this, but it could work as a last resort... Happy coding ;)
Upvotes: 0
Reputation: 4221
You might want to take a peek on this website: http://bz.var.ru/comp/web/resizable.html There is a resizable columns script there, which you could extract and implement in your code.
Upvotes: 0
Reputation: 1
I didn't see anyone mentioning the DataTables.net plugin as it has some addons that work for these cases. It's totally customizable, and extendable.
For some reason my jsfiddle was showing me errors that I could not debug, but when tried in here with xammp it worked perfectly and rendered pagination, column sorting and fixed header examples.. as you can see the initialization code is quite short, but you might want to download de codebase for the imagery. I basically took your provided code elements and arrange it to apply DataTables.net jQuery plugin.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
TEST DataTables.net plugin - Fixed Header example
</title>
<script src='jquery182.js' ></script>
<script src='jquery.dataTables.js' ></script>
<script src='FixedHeader.js' ></script>
<link rel='stylesheet' href='demo_table.css'/>
<link rel='stylesheet' href='demo_page.css'/>
</head>
<body>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display data_Table" >
<thead>
<tr>
<th style='width:47px; height:29px' >
<input name="chkSelectAll" type="checkbox" value="" id="chkSelectAll"/></th>
<th style='width:159px;font-weight:bold'>Computer <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Group <span class="actdiv"> </span></th>
<th style='width:97px;font-weight:bold'>Policy <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Domain <span class="actdiv"> </span></th>
<th style='width:126px;font-weight:bold'>Address<span class="actdiv"> </span></th>
<th style='width:127px;font-weight:bold'>Type <span class="actdiv"> </span></th>
<th style='width:109px;font-weight:bold'>Status <span class="actdiv"> </span></th>
<th style='width:181px;font-weight:bold'>Test Status <span class="actdiv"> </span></th>
<th style='width:165px;font-weight:bold'>Version <span class="actdiv"> </span></th>
<th style='width:131px;font-weight:bold'>Date <span class="actdiv"> </span></th>
<th style='width:160px;font-weight:bold'>Last Date <span class="actdiv"> </span></th>
<th style='width:173px;font-weight:bold'>Count </th>
</tr>
</thead>
<tbody>
<tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr> </tbody>
</table>
</div>
<script>
jQuery(document).ready(function($){
var oTable = $('.data_Table').dataTable( {
// "sDom": 'RC<"clear">lfrtip'
//options: we are using
"sDom": 'Rlfrtip',
"sScrollY": "200px",
"bPaginate": true //Disable pagination false
} );
});
</script>
</body>
</html>
INCLUDE JS & CSS from JSFIDDLE LINK
- JSFiddle Link: [http://jsfiddle.net/Hx7ak/60/][1]
If you take the source code at the HTML section for that jsfiddle, and download the dependencies from that jsfiddle link (the javascript and css files, and place this html within the same directory) it should get you started in no time with it.
Although, depending on which options you might want to look into shall you decide to go for this jQuery plugin, keep in mind that it has a very active community and support and at the forums the developers should be masters with specifics.
For more check on DataTables.net the example section.
Interesting links that can help you depending on how you would like to present your data with this plugin are:
FixedHeader
http://www.datatables.net/release-datatables/extras/FixedHeader/two_tables.html
http://www.datatables.net/release-datatables/extras/FixedHeader/index.html
http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html
ColReorder
http://www.datatables.net/release-datatables/extras/ColReorder/scrolling.html
http://www.datatables.net/release-datatables/extras/ColReorder/fixedheader.html
http://www.datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html
Colvis (Seems interesting)
FixedColumns
Well as you can see at http://www.datatables.net/examples/ the list of examples is quite long, but hope this helps!
Expected results with this jQuery Plugin
Upvotes: 5
Reputation: 79830
Edit: For resizable columns and fixed header try this plugin http://www.tablefixedheader.com/fullpagedemo/ which lets you resize the header along with the columns.
I recently wrote a plugin for fixed header column tables. Which is basically to address the issue with the scrollable table in which the header and columns goes out of view while scrolling.
Check out the the plugin demo page @Git: http://meetselva.github.com/fixed-table-rows-cols/
And the full page demo of your HTML: http://jsfiddle.net/ryB2n/4/embedded/result/
DEMO: http://jsfiddle.net/ryB2n/4/
Also this plugin supports fixed columns which can configured using fixedCols option. Note that it is just an optional configuration, so without that option would render you the fixed header table.
Note: I am still working on that plugin to handle exception cases and other features, so please use it with caution.
Upvotes: 2
Related Questions
- jQuery UI resizable - resize table columns size with overflow
- Table column re-sizing using jQuery
- JQuery UI Resizable Fixed Size Table
- Jquery resizing table header columns
- Table column resize is not working if table header has multiple rows and colspan to table cell
- Resizable columns tables with fixed header
- Make HTML table columns resizable with jQuery
- Resize Columns jquery
- jQuery UI Resize with table and colspans
- How to resize a table cell using jquery?