Skip to content
This repository has been archived by the owner. It is now read-only.
jQuery plugin to modify a table element with a fixed header element and fixed left columns
JavaScript
Branch: master
Clone or download
Latest commit ec16cb8 Jun 13, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
samples update CSS Reset version Jun 12, 2014
.gitignore first commit Nov 28, 2013
LICENSE
README.md
fixedTblHdrLftCol.jquery.json update jQuery to 2.1.1 and add a new sample Jun 12, 2014
jquery.fixedTblHdrLftCol-min.js add a function to re-calculate header position Jun 12, 2014
jquery.fixedTblHdrLftCol.js add a function to re-calculate header position Jun 12, 2014

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.

You can’t perform that action at this time.