112

jQuery Scrollable Table Plugin

jQuery, write less, do more

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


Related posts

  1. jQuery Image Preload Plugin
  2. WordPress HiFi Plugin — Head and Foot Injection

Posted in , | Tagged , , , | 112 Responses

112 responses to “jQuery Scrollable Table Plugin”

  1. rufus
    rufus November 18, 2011 at 11:36 am |

    In Chrome 15, the table headers don’t line up with the table content at all.
    @Jacob: That code needs to go in your tag where you declare the scrollable table, after that declaration. Be careful with the fancy quotation marks if you copy/paste from this site.

  2. Jacob
    Jacob November 19, 2011 at 10:58 am |

    Hi Rufus,

    thanks for your reply. Much appriciated.
    I’ve played around a lot with the entire code and still my tables doesn’t align properly with the content. I’m hoping to get it work for Firefox 8.0.
    Were there ever a fix for it? My content is loaded through a php script and to be real honest I am not a guru on JavaScript.

    Thanks for your time and advice!

  3. Derick Ablong
    Derick Ablong November 21, 2011 at 7:08 pm |

    Hi,

    I use safari in mac. I used the plugin and it was very useful to me, but there’s a weird thing i’ve noticed. At first load, the plugin doesn’t work, but I’ve tried to reload it again it work.

    This always happen when the time i run it.

    Here’s my code:

    /**/

    Please let me know if there’s something that i’ve not correctly used.
    Derick

  4. Raphaël
    Raphaël November 22, 2011 at 1:31 am |

    Nice job. I’am trying to adapt the table lenght on window resize this way :

    $(window).resize(function() {
    var h = $(window).height() - 200;
    $(".tablescroll_wrapper").height(h);
    });
    //200 is an example corresponding to the total top and bottom header and footer of my page

    With full screen, if ever vertical scroll is not necessary, then, on window resize, a vertical scroll appears. This is good, but an horizontal scroll appears also… due to the the width change when the vertical scroll appears. is there a way to achieve this ?

  5. rufus
    rufus November 23, 2011 at 8:47 am |

    My alignment issue was caused by borders. They need to be consistent in the and .

  6. Cman
    Cman December 9, 2011 at 1:37 pm |

    I am using ajax to update my table. When my table is updated or reloaded, the headers/pagers are being recreated each time? Any way to get around this?

  7. Purna
    Purna December 12, 2011 at 2:13 pm |

    i can see scroll bar after my page got load. this is fine.

    i have search button, on search button click i am rendering html table and setting like table.html(renderhtml) that time it shows 2 tables. why it is like that.

  8. David Phillips
    David Phillips December 22, 2011 at 12:40 pm |

    This plugin is interesting, but alters hard-coded widths, and the headers and footers do not line up anymore (WIN 7 IE8)

    Speaking of footers, you need a little HTML 101 because you do not understand the basic markup.
    table
    thead
    TFOOT
    tbody
    See reference before you dismiss me…
    w3schoolscomtagstag_tfoot.asp

    Nice try, but try and tweak it to where it doesnt alter what I took time to write… it also will not work “out-of-the-box” with jquery.tablesorter

    too “buggy” for my tastes…

  9. iand109
    iand109 January 10, 2012 at 3:58 am |

    Hi,
    I have got this working just about as I want it to – but I now have a problem. I need to use Javascript to access various cellTexts of the rows in the tHead and the tFoot sections of the table. I just can’t seem to do that, I can only get rows in the tBody as this seems to have rearranged the header and footer elements of the table in such a way that I can’t get them – can you help?

  10. CineWeekly
    CineWeekly January 21, 2012 at 1:33 pm |

    My header isn’t lining up with the scrollable content. It’s like it’s ignoring the cellspacing and cellpadding and something else has to be in the equation. I’ve removed all CSS and the problem persists. It has to be in the jQuery.

    http://www.cineweekly.com/blogs/gallery.html

  11. sandeep
    sandeep January 23, 2012 at 3:54 am |

    This is nice jquery for use of table body scroll . but it’s working only whit 1 table on a page if there are more than 1 table than it doesn’t works .
    Is there any other method to use this or it works only with 1 table on a page

  12. GT
    GT January 24, 2012 at 8:19 am |

    Here’s how I overrode the widths in order to make the table width resize and zoom properly:

    .tablescroll_head
    {
    font-size: 11px;
    font-weight: bold;
    background-color: #eee;
    border-left: 0;
    border-top: 0;
    margin-bottom: 0;
    width: 100% !Important;
    }

    .tiTable /* class for my table element */
    {
    width: 100% !Important;
    border-collapse: collapse;
    display: table;
    }

1 … 3 4 5

Leave a Reply