bsara / sticky-table-headers.js

Sticky table headers done right, with native JS & CSS
Other
4 stars 3 forks source link

sticky-table-headers.js Build Status

CPOL v1.02 License

NPM Package  Bower Package

IMPORTANT: You can now create any element with sticky properties using the new CSS position: sticky; feature! While this library may continue to be a good option for older browsers, you should verify that the new CSS sticky feature does not meet your needs before using this library. That all said, this library will still continue to be supported for the forseeable future.

For more information about CSS sticky elements, check out this short CSS-Tricks.com article.

Sticky table headers done right, with native JS and CSS, no extra libraries needed. This is a super easy-to-use library that can be used without writing a single bit of JavaScript yourself!

Includes support for AMD, CommonJS, and global inclusion via an HTML script tag.

Install

Features



Documentation


Table of Contents


Code Samples


Including the Library's Auto Initialization Version in Your Project

Include as AMD Module

define([ 'sticky-table-headers.auto' ], function(STH) {
  ...
});

Include as CommonJS Module

var STH = require('sticky-table-headers.auto');
...

Include via HTML Script Tag

<script type="text/javascript" src="https://github.com/bsara/sticky-table-headers.js/raw/master/sticky-table-headers.auto.min.js" />

Including the Library's Manual Initialization Version in Your Project

Include as AMD Module

define([ 'sticky-table-headers' ], function(STH) {
  STH.manager.init();
  ...
});

Include as CommonJS Module

var STH = require('sticky-table-headers');
STH.manager.init();
...

Include via HTML Script Tag

<script type="text/javascript" src="https://github.com/bsara/sticky-table-headers.js/raw/master/sticky-table-headers.auto.min.js" />
<script type="text/javascript">
  ...
  STH.manager.init();
  ...
</script>

Usage

Auto Initialization

To use auto initialization, you must include the file sticky-table-headers.auto.js (or sticky-table-headers.auto.min.js) in your project. This contains code that will automatically call STH.manager.init() once the page has finished loading.

Because auto initialization takes place after the page has finished loading, if any additional tables requiring sticky headers are added after the page has loaded, they will not automatically be loaded by the library**. You can, however, call STH.manager.reinit() if you don't want to manually locate each new table and add it to the STH.manager object (though it would be much more performant to add each table one by one to STH.manager, see the STH.manager docs for more details).

Auto Initialization in Action: JSBin Code Example

Manual Initialization

Manually initializing the sticky headers is available if you want to specify exactly when to initialize all sticky headers, or if you don't want to use the manager at all.

To manually initialize ALL sticky table headers found on a page, simply call STH.manager.init() after those tables have finished loading.

To manually initialize sticky table headers for a single table, simply call STH.manager.addStickyHeaderToTable(tableElement, [scrollableElement]) after that the table has finished loading. If you don't want to use the manager to manage your sticky header tables, you can also initialize a sticky table header by doing the following (See StickyTableHeader for details):

var myStickyTableHeader = new StickyTableHeader(tableElement, scrollableElement)

Manual Initialization in Action: JSBin Code Example




Contributing

See contribution documentation page for details.