Today I got a call from a customer and we were looking over an older application that uses a lot of tables to display financial and other assorted data.
The application is mostly meta-data driven with lots of layout formatting automatically driven through meta data rather than through explicit hand coded HTML layouts. One of
the problems in this apps are tables that display a non-fixed amount of data.
The users of this app don't want to use paging to see more data, but instead want to display overflow data using a scrollbar. Many of
the forms are very densely populated, often with multiple data tables that display a few rows of data in
the UI at
the most. This sort of layout does not lend itself well to paging, but works much better with scrollable data. Unfortunately scrollable tables are not easily created. HTML Tables are mangy beasts as anybody who's done any sort of Web development knows. Tables are finicky when it comes to styling and layout, and they have many funky quirks, especially when it comes to scrolling both of
the table rows themselves or even
the child columns. There's no built-in way to make tables scroll and to lock headers while you do, and while you can embed a table (or anything really) into a scrolling div with something like this: <div style="position:relative; overflow: hidden; overflow-y: scroll; height: 200px; width: 400px;">
<table id="table" style="width: 100%" class="blackborder" >
<thead>
<tr class="gridheader">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th >Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1 Content</td>
<td>Column 2 Content</td>
<td>Column 3 Content</td>
<td>Column 4 Content</td>
</tr>
<tr>
<td>Column 1 Content</td>
<td>Column 2 Content</td>
<td>Column 3 Content</td>
<td>Column 4 Content</td>
</tr>
…
</tbody>
</table>
</div>
</div>
that won't give a very satisfying visual experience:
Both
the header and body scroll which looks odd. You lose context as soon as
the header scrolls
off the top and when you reach
the bottom of
the list
the bottom outline of
the table shows which also looks
off.
The the side bar shows all
the way down
the length of
the table yet another visual miscue. In a pinch this will work, but it's ugly.
What's out there?
Before we go further here you should know that there are a few capable grid plug-ins out there already. Among them:
Flexigrid (can work of any table as well as with AJAX data)
jQuery Scrollable Table Plug-in (feature similar to what I need but not quite)
jqGrid (mostly an Ajax Grid which is very powerful and works very well)
But in
the end none of them fit
the bill of what I needed in this situation. All of these require custom CSS and some of them are fairly complex to restyle. Others are AJAX only or work better with AJAX loaded data. However, I need to actually try (as much as possible) to maintain
the original styling of
the tables without requiring extensive re-styling.
Building
the makeTableScrollable() Plug-in
To make a table scrollable requires rearranging
the table a bit. In
the plug-in I built I create two <div> tags and split
the table into two: one for
the table header and one for
the table body.
The bottom <div> tag then contains only
the table's row data and can be scrolled while
the header stays fixed. Using jQuery
the basic idea is pretty simple: You create
the divs, copy
the original table into
the bottom, then clone
the table, clear all content append
the <thead> section, into new table and then copy that table into
the second header <div>. Easy as pie, right?
Unfortunately it's a bit more complicated than that as it's tricky to get
the width of
the table right to account for
the scrollbar (by adding a small column) and making sure
the borders properly line up for
the two tables. A lot of style settings have to be made to ensure
the table is a fixed size, to remove and reattach borders, to add extra space to allow for
the scrollbar and so forth.
The end result of my plug-in is a table with a scrollbar. Using
the same table I used earlier
the result looks like this:
To create it, I use
the following jQuery plug-in logic to select my table and run
the makeTableScrollable() plug-in against
the selector:
$("#table").makeTableScrollable( { cssClass:"blackborder"} );
Without much further ado, here's
the short code for
the plug-in:
(function ($) {
$.fn.makeTableScrollable = function (options) {
return this.each(function () {
var $table = $(this);
var opt = {
// height of
the table
height: "250px",
// right padding added to support
the scrollbar
rightPadding: "10px",
// cssclass used for
the wrapper div
cssClass: ""
}
$.extend(opt, options);
var $thead = $table.find("thead");
var $ths = $thead.find("th");
var id = $table.attr("id");
var cssClass = $table.attr("class");
if (!id)
id = "_table_" + new Date().getMilliseconds().ToString();
$table.width("+=" + opt.rightPadding);
$table.css("border-width", 0);
// add a column to all rows of
the table
var first = true;
$table.find("tr").each(function () {
var row = $(this);
if (first) {
row.append($("<th>").width(opt.rightPadding));
first = false;
}
else
row.append($("<td>").width(opt.rightPadding));
});
// force full sizing on each of
the th elemnts
$ths.each(function () {
var $th = $(this);
$th.css("width", $th.width());
});
// Create
the table wrapper div
var $tblDiv = $("<div>").css({ position: "relative",
overflow: "hidden",
overflowY: "scroll"
})
.addClass(opt.cssClass);
var width = $table.width();
$tblDiv.width(width).height(opt.height)
.attr("id", id + "_wrapper")
.css("border-top", "none");
// Insert before $tblDiv
$tblDiv.insertBefore($table);
// then move
the table into it
$table.appendTo($tblDiv);
// Clone
the div for header
var $hdDiv = $tblDiv.clone();
$hdDiv.empty();
var width = $table.width();
$hdDiv.attr("style", "")
.css("border-bottom", "none")
.width(width)
.attr("id", id + "_wrapper_header");
// create a copy of
the table and remove all children
var $newTable = $($table).clone();
$newTable.empty()
.attr("id", $table.attr("id") + "_header");
$thead.appendTo($newTable);
$hdDiv.insertBefore($tblDiv);
$newTable.appendTo($hdDiv);
$table.css("border-width", 0);
});
}
})(jQuery);
Oh sweet spaghetti code :-)
The code starts out by dealing
the parameters that can be passed in
the options object map:
height
The height of
the full table/structure.
The height of
the outside wrapper container. Defaults to 200px.
rightPadding
The padding that is added to
the right of
the table to account for
the scrollbar.
Creates a column of this width and injects it into
the table. If too small
the rightmost
column might get truncated. if too large
the empty column might show.
cssClass
The CSS class of
the wrapping container that appears to wrap
the table. If you want a border
around your table this class should probably provide it since
the plug-in removes
the table
border.
The rest of
the code is obtuse, but pretty straight forward. It starts by creating a new column in
the table to accommodate
the width of
the scrollbar and avoid clipping of text in
the rightmost column.
The width of
the columns is explicitly set in
the header elements to force
the size of
the table to be fixed and to provide
the same sizing when
the THEAD section is moved to a new copied table later.
The table wrapper div is created, formatted and
the table is moved into it.
The new wrapper div is cloned for
the header wrapper and configured. Finally
the actual table is cloned and cleared of all elements.
The original table's THEAD section is then moved into
the new table. At last
the new table is added to
the header <div>, and
the header <div> is inserted before
the table wrapper <div>.
I'm always amazed how easy jQuery makes it to do this sort of re-arranging, and given of what's happening
the amount of code is rather small.
Disclaimer: Your mileage may vary
A word of warning: I make no guarantees about
the code above. It's a first cut and I provided this here mainly to demonstrate
the concepts of decomposing and reassembling an HTML layout :-) which jQuery makes so nice and easy.
I tested this component against
the typical scenarios we plan on using it for which are tables that use a few well known styles (or no styling at all). I suspect if you have complex styling on your <table> tag that things might not go so well. If you plan on using this plug-in you might want to minimize your styling of
the table tag and defer any border formatting using
the class passed in via
the cssClass parameter, which ends up on
the two wrapper div's that wrap
the header and body rows.
There's also no explicit support for footers. I rarely if ever use footers (when not using paging that is), so I didn't feel
the need to add footer support. However, if you need that it's not difficult to add -
the logic is
the same as adding
the header.
The plug-in relies on a well-formatted table that has THEAD and TBODY sections along with TH tags in
the header. Note that ASP.NET WebForm DataGrids and GridViews by default do not generate well-formatted table HTML. You can look at my Adding proper THEAD sections to a GridView post for more info on how to get a GridView to render properly.
The plug-in has no dependencies other than jQuery.
Even with
the limitations in mind I hope this might be useful to some of you. I know I've already identified a number of places in my own existing applications where I will be plugging this in almost immediately.
Resources
Download Sample and Plug-in code
Latest version in
the West Wind Web & AJAX Toolkit Repository
© Rick Strahl, West Wind Technologies, 2005-2011Posted in jQuery HTML ASP.NET
