jQuery plugin to modify a table element with a fixed header element and fixed left columns
JavaScript
Latest commit ec16cb8 Jun 12, 2014 @nkmrshn fixed the link

README.md

Fixed Table Header and Left Column

Description

fixedTblHdrLftCol is a jQuery plugin to modify a table element with a fixed header element and fixed left columns.

Requirements

  • jQuery v2.1.1+.
  • The header/body must be wrapped around by a THEAD/TBODY element.

Settings

sample1

Option 1 Option 2 Option 3 Default value Datatype Remarks
scroll {} height null String Scroll area height
width null String Scroll area width
headRow {} className 'fTHLC-head-row' String Class name for position fixed TH elements
enabled true Boolean Scroll event
overflow 'auto' String CSS overflow property
leftCol {} className 'fTHLC-left-col' String Class name for position fixed TD elements
enabled true Boolean Scroll event
overflow 'auto' String CSS overflow property
fixedSpan 1 Number Number of left columns to be fixed
syncWith null String jQuery Selector
wrapper {} outer {} idName null String ID name for outer DIV element
className 'fTHLC-outer-wrapper' String Class name for outer DIV element
inner {} idName null String ID name for inner DIV element
className 'fTHLC-inner-wrapper' String Class name for inner div element
corner {} append true Boolean Clone top left corner
deepClone false Boolean Clone with events
outer {} idName null String ID name for outer DIV element
className 'fTHLC-outer-corner' String Class name for outer DIV element
inner {} idName null String ID name for inner cloned TABLE element
className 'fTHLC-inner-corner' String Class name for inner cloned TABLE element

Top Left Corner

When you set the corner.appended option to false and scrolled the table, the top left corner will be look like this.

sample2

If this option was true, the plugin will automaticaly clone the top left corner of the table and append it to most front. If it's event handlers were bounded before, please set corner.deepClone option to true.

Syncronize Scroll Events

If there were two or more tables which you want to syncronize the scroll events, set the jQuery selector to scroll.syncWith option.

TODO

Currently, this plugin does NOT support COLSPAN and ROWSPAN attributes.

Browsers

This plugin is tested with following browsers:

  • Apple Safari 7.0+
  • Google Chrome 35.0+
  • Mozilla Firefox 30.0+

Samples

All samples are written in HTML5/CSS3. The jQuery CDN and the YUI CSS Reset CDN are used.

  1. Basic
  2. Multi-fixed 1
  3. Multi-fixed 2
  4. Syncronize scroll events

License

Released under the MIT license.