Sticky table header (Vanilla js)
StickyThead
==================
bash
npm install stickythead
`
or by loading it directly from the unpkg CDN:
`
`
Usage
-----
Initializing the plugin is pretty straight forward:
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements);
`
$3
To remove the plugin:
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements, 'destroy');
`
$3
You can initialize the plugin with an options map to tweak the behavior. The following options are supported:
#### fixedOffset
A number or jQuery object specifying how much the sticky header should be offset from the top of the page:
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements, { fixedOffset: document.querySelector('#header') });
`
#### scrollableArea
A DOM element or jQuery object. Allows you to overwrite which surrounding element is scrolling. Defaults to window.
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements, { scrollableArea: document.querySelector('.scrollable-area') });
`
#### cacheHeaderHeight
Performance tweak: When set to true the plugin will only recalculate the height of the header cells when the width of the table changes.
Default value: false
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements, { cacheHeaderHeight: true });
`
#### z-index
The plugin uses z-index to make the thead overlay the body. You can override the z-index value by passing in a zIndex option:
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements, { zIndex: 999 });
`
$3
As described in pull request #33 responsive pages might need to reinitialize the plugin when the user resizes his browser. This is can be done by calling the plugin with the new options:
`js
let elements = document.querySelectorAll('table')
stickyThead.apply(elements, { fixedOffset: [new-offset] });
`
$3
The plugin triggers the following events on the targeted | `s explicitly in the css in order to make the plugin work
- Internet Explorer: Adding horizontal margin to the table causes the header to be misaligned when scrolling. (Issue #10) - Using the plugin together with tablesorter breaks in Internet Explorer 8 Browser Support --------------- The plugin has been verified to work in: - Chrome 35 - Firefox 29 - Internet Explorer 8-11 - Safari 5 NOTE: It does not work in Internet Explorer 7 (but it degrades nicely) |
|---|