This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.
Show Me The Money (Demo)
| city | state code | zip | latitude | longitude | county |
| 10 | 2 | 15 | - | - | 9 |
| Holtsville | NY | 00501 | 40.8152 | -73.0455 | Suffolk |
| Holtsville | NY | 00544 | 40.8152 | -73.0455 | Suffolk |
| Adjuntas | PR | 00601 | 18.1788 | -66.7516 | Adjuntas |
| Aguada | PR | 00602 | 18.381389 | -67.188611 | Aguada |
| Aguadilla | PR | 00603 | 18.4554 | -67.1308 | Aguadilla |
| Aguadilla | PR | 00604 | 18.4812 | -67.1467 | Aguadilla |
| Aguadilla | PR | 00605 | 18.429444 | -67.154444 | Aguadilla |
| Maricao | PR | 00606 | 18.182778 | -66.980278 | Maricao |
| Anasco | PR | 00610 | 18.284722 | -67.14 | Anasco |
| Angeles | PR | 00611 | 18.286944 | -66.799722 | Utuado |
| Arecibo | PR | 00612 | 18.4389 | -66.6924 | Arecibo |
| Arecibo | PR | 00613 | 18.1399 | -66.6344 | Arecibo |
| Arecibo | PR | 00614 | 18.1399 | -66.6344 | Arecibo |
| Bajadero | PR | 00616 | 18.428611 | -66.683611 | Arecibo |
| Barceloneta | PR | 00617 | 18.4525 | -66.538889 | Barceloneta |
Table Scroll Plugin Overview
The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.
Using the plugin is pretty straight forward, when you download the plugin you can view the demo file to get up to speed and begin working with it immediately.
The HTML TABLE markup is also pretty basic:
<table id="thetable" cellspacing="0"> <thead> <tr> <td>city</td> <td>state code</td> <td>zip</td> <td>latitude</td> <td>longitude</td> <td>county</td> </tr> </thead> <tfoot> <tr> <td>city</td> <td>state code</td> <td>zip</td> <td>latitude</td> <td>longitude</td> <td>county</td> </tr> </tfoot> <tbody> <tr class="first"> <td>Holtsville</td> <td>NY</td> <td>00501</td> <td>40.8152</td> <td>-73.0455</td> <td>Suffolk</td> </tr> <tr> <td>Holtsville</td> <td>NY</td> <td>00544</td> <td>40.8152</td> <td>-73.0455</td> <td>Suffolk</td> </tr> <tr> <td>Adjuntas</td> <td>PR</td> <td>00601</td> <td>18.1788</td> <td>-66.7516</td> <td>Adjuntas</td> </tr> </tbody> </table>
Styling the table should go pretty smoothly, but be warned, the plugin does some width/height calculations which require the styles to be in place prior to doing the calculations.
Here is the demo CSS which should get you started:
.tablescroll {
font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tablescroll td,
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot {
border:1px solid #ccc;
}
.tablescroll td {
padding:3px 5px;
border-bottom:0;
border-right:0;
}
.tablescroll_wrapper {
background-color:#fff;
border-left:0;
}
.tablescroll_head,
.tablescroll_foot {
background-color:#eee;
border-left:0;
border-top:0;
font-size:11px;
font-weight:bold;
}
.tablescroll_head {
margin-bottom:3px;
}
.tablescroll_foot {
margin-top:3px;
}
.tablescroll tbody tr.first td {
border-top:0;
}
The plugin is basic and only has a few options:
$.fn.tableScroll.defaults =
{
flush: true, // makes the last thead and tbody column flush with the scrollbar
width: null, // width of the table (head, body and foot), null defaults to the tables natural width
height: 100, // height of the scrollable area
containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class
};
Like most jQuery plugins, implementation is a snap:
jQuery(document).ready(function($)
{
$('#thetable').tableScroll({height:200});
// other examples
// sets the table to have a scrollable area of 200px
$('#thetable').tableScroll({height:200});
// sets a hard width limit for the table, setting this too small
// may not always work
$('#thetable').tableScroll({width:400});
// by default the plugin will wrap everything in a div with this
// css class, if it finds that you have manually wrapped the
// table with a custom element using this same css class it
// will forgo creating a container DIV element
$('#thetable').tableScroll({containerClass:'myCustomClass'});
});
Like many projects, we developers build out of necessity. I couldn’t quite find what I needed, so i wrote my own! This plugin accomplished all of what I needed, and I thought it useful enough that I would share. If you have any feature requests and/or bug reports please let me know. And the plugin name is pretty generic too (if you have a better one, feel free to drop me a line).
I’ve tested the plugin on Windows with Chrome, FF 3.6, IE 6, IE 8, Safari 4. If anyone is on a Mac, please let me know what your results are?
Download
jQuery TableScroll plugin, this project is on github
I needed a scroller for an autogenerated table, and after much fruitless searching for a simple *and* working jQuery table scroller… this one looks like it could be the one
I’m on a mac. Just having a quick look on a few browsers now:
FF 3.6.3 – perfect
Opera 10.0 – perfect
Safari 4.0.3 – showing a horizontal scrollbar but otherwise perfect. I’m sure some css will sort knock some sense into that.
I’m cautiously optimistic about checking it on IEx tomorrow
containerClass is a useful detail too. keep up the good work!
I’m hope that it proves useful to you, please give me any feedback you have so that I can improve the code and make it more robust.
The original project I coded this for needed it primarily for IE6. All my tests worked well on IE6, 7, and 8!
Scrollbars appear, but they don’t constrain the height. The height of the tablescroll_wrapper is set to auto, so no matter what the table’s size is never constrained to the size I set with tableScroll({height:#}); I’m using Safari. I have the table inside another div with a height and max-height set, but the table still expands past this height.
any ideas?
phil, for me the demo on this page works as expected in Safari PC, does it also work for you? Send me your source and I’ll take a look at it dimas3 [at] farinspace [dot] com
hi ..
after i play arround with this plugin i find it is cool and very neat ..
but I encounter a problem, when the table height is not long enough for the scroll height, the layout seem like running out ..
do you have any solution on this ?
Ian, I’ve applied a fix to the code, download it again and give it a spin…
thx dimas for you quick fixed. it works !!
really appreciate it…
All I can say is thank God for you and your plugin. I’ve been trying to get IE8 to allow me to scroll the body of a table but it doesn’t seem to like any height restrictions on table body length. This plugin helped me soo much-I wish I wouldn’t have spent the past 6 hours trying to figure out how to do this….
I’m glade you found it useful. I tried to keep the plugin simple, which should allow anyone to further extend it and customize it for their needs.
omg .. i find the plugin cound’t work in IE7.
Do you have any idea how to make it work ?
Ian, What issues are you experiencing with IE7? I did a quick test an all seems fine…
ermmm…
now it work back? i wonder whether is my IE issue or not.
I’m using the IETester to test whether it work. it some how the past few hour didn’t work .. now I close all and open it back .. it seem work.
i need to do a few more test .. btw, do you have any recommend tool to test in IE7 ?
I use VirtualBox Images primarily for IE7 and IE6 testing (most troublesome browsers)… I will definitely give IETester a try myself…
dear dimas,
ok .. i also have a virtualbox (plugable version) recently, haven’t install with the troublesome browsers yet.
now i think i found what is the problem that cause in my application,
i use the following at the end of the code
$(‘#mytable’).tableScroll({ height: 200 });
where I suppose to use
$(document).ready(function() { $(‘#mytable’).tableScroll({ height: 200 }); });
but it work fine for me to use the previous method in IE6 and IE8 without problem.
i also wanna use your plugin together with the tablesorter.com, i think the combination will be the perfect solution
anyway .. will do more testing and report you if got any problem .. thanks a lot for your quick response and help ..
Hi,
This plug-in don’t work when i am trying to add column dynamically, it works only for static tables
hunt, thanks for reporting this.
I’ve added a new version (v20100514) which supports an “undo” command which will basically revert the formatting of a table by the plugin. You can then add new columns and essentially redraw the table again.
jQuery('#thetable').tableScroll('undo'); jQuery('#thetable thead tr').append('<td>date</td>'); jQuery('#thetable tbody tr').append('<td>05/14/10</td>'); jQuery('#thetable tfoot tr').append('<td align="center">-</td>'); jQuery('#thetable').tableScroll({width:600,height:150});Known issue: when a thead column name wraps slight alignment issues may be noticed (I’ll fix this when I have a chance)
Also, to add rows dynamically you do not need to call “undo” you would simply do the following:
jQuery('#thetable tbody').append('<tr><td>Holtsville</td><td>NY</td><td>00501</td><td>40.8152</td><td>-73.0455</td><td>Suffolk</td></tr>');Works like a charm! Thanks a ton
Hi Dimas
Thanks for you solution which works really well. I would be greatful if you could show me how to modify the plugin so that the header and first row as well as the first column can be frozen?
Many Thanks
Gee, when I get a moment I will try to work on those additions.
The plugin basically manipulates the original table data, pulling it apart and then reconstructs new markup.
(view source)
line 109-148 is where the thead and tfoot are pulled from the orginal table. You can modify this to also pull the first row of the table.
A possibly easier solution to locking the first row would be to include it in the thead.
Locking the table column will be a bit more tricky, as I look at it now the plugin will probably have to be revamped to allow locking of columns, I don’t see an easy solution to this in the plugin’s current state.
This plugin works best with vertically scrolling tables vs with horizontally scrolling tables (most likely where locking columns would be most useful).
Thanks for your quick reply which is much appreciated. Annoyingly its the locking of the first column that we are really keen to get working as we work with large tables. I was thinking along the lines of selecting the first column using JQuery from the original table then passing it to the plugin. Even a quick hack will be much appreciated.
Many thanks again
Hi Dimas,
I very much like the plugin. So far it is serving my needs well. I have one question. I have a need to support window re-sizing etc. The plugin is great however when I my browser size increases/decreases the scrollable table does not adjust. I’ve made a few attempts to rectify this but have not arrived a ta solution yet. Do you have any ideas suggestions on what object or objects that I need to adjust the table size dynamically or perhaps a different/better solution?
I’d appreciate any help you can offer.
-Ken
hi,
one problem is when setting the width of a table to 100% when the scrollbar is added to the right, thus enlarging the width of the full table and i have to scroll the window to the right to see the whole scrollbar. i need some solution to keep the table width with the scrollbar the same as the table without scrollbar.
thanks
Another question is how to make this work on IE with jQuery v1.3.1? I’ve tested it on IE7 and the table shows both scrollbars (vertical, horizontal).
Hi Dimas,
This solution is just what we are after altough we also have a requirement to be able to freeze the first column akin Excel as per Gee’s and now considering other third party datagrids. The only snag I came across from this solution is that the header columns didn’t appear to be inline with the datagrid. Any advice suggestion from anyone would be greatly appreciated.
thanks
Girma
Hi,
thanks for the great job. I got a problem with a window’s resize. The table is contained in a div with height 100% and when I resize the window, the window’s column don’t follow the scaling. Any ideas?