Making Scrollable Tables with fixed headers – Updated

This post is an update to my previous post on making scrollable tables with fixed headers. I’ve had a few requests for adding additional functionalities, and I thought instead of cluttering the old post, I’ll do a new one for the updated script.

What’s new?

• Multiple tables on a single page
• Multiple header freezing
• Column freezing

To see it in action, please click here.

Implementation

• Download the file fxHeader_0.6.min.js and copy to your folder (An uncompressed fxHeader_0.6.js is also available)
• Include the above file in your HTML page

  <script src="fxHeader_0.6.min.js" type="text/javascript"></script>

• Just before body end tag (</body>), add these lines,

<script type=”text/javascript”>
fxheaderInit(‘dataTable1’,200,2,2);
fxheaderInit(‘dataTable2’,200,2,0);
fxheader();
</script>

Call fxheaderInit for every table you want to add scrolling. fxheader() is only required to call once.

Attributes for fxheaderInit function

• Table id
• Height (in pixels)
• No. of rows to freeze
• No. of columns to freeze

Width will be taken from the table’s width attribute, so make sure the table you’re passing in has got a width attribute. If width is specified in percentage, it will be calculated in regards to width of the document body, and not of the containing element (ie parentNode). Since width will be changed on window resize, fxheader() function will be attached to window.onresize, if any of the table’s width is specified in percentage. If your existing code has reliance on window.onresize event, please amend the fxHeader.js file.

If your table is generated by a framework like JSF or ASP.net, you’ll need to avoid any possible ID collision as discussed on my previous post.

Cheers,

Jaimon