jQuery plugin to modify a table element with a fixed header element and fixed left columns
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
samples
.gitignore
LICENSE
README.md
fixedTblHdrLftCol.jquery.json
jquery.fixedTblHdrLftCol-min.js
jquery.fixedTblHdrLftCol.js

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.