jQuery Scrollable Table Plugin

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)

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