jquery.stickyTableHeader
A small (2.4kb gzipped) and accessible jQuery plugin for adding sticky headers to large data tables.
Demo
https://simonsmith.github.io/jquery.stickyTableHeader/test/
Features
- Supports multiple tables on one page
- Uses
position: fixed
that allows smooth scrolling and a wide range of browser support - Screenreader support
- Minimal DOM updates in scroll event
Installation
npm
It's recommended to require
/import
the plugin as part of an existing webpack or browserify setup:
npm install jquery jquery-sticky-table-header --save
// index.js const $ = require('jquery'); require('jquery-sticky-table-header'); $('.table-container').stickyTableHeader();
Relies on jQuery as a peerDependency
so ensure it is installed in your application.
Manual
- Clone the repository
yarn && yarn run build
ornpm install && npm run build
- A UMD version of the plugin will be available in the
./build
directory. - Include it in your project as needed
Example
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.stickyTableHeader.js"></script>
Usage
There are some HTML requirements for the plugin to function correctly:
- The table must be inside a containing element with no siblings
- There must be a
thead
element - There must be a
tbody
element
Example
<div class="table-container"> <table> <thead> <!-- content --> </thead> <tbody> <!-- content --> </tbody> </table> </div>
$('.table-container').stickyTableHeader();
It's recommended that you apply a background colour to the header to mask the real table header beneath it.
Options
- outsideViewportOnly - (boolean) Only run the plugin if the table is larger than the viewport default
true
- scrollThrottle - (number) Maximum number of times the scroll handler can be called over time in milliseconds default
50
- zIndex - (number) Added to the header to control stacking default
2
- offset (object) Offset values for the header
- top (number) - Offset (in pixels) applied to the header default
0
- topScrolling (string) - Offset (in pixels) applied to the header whilst scrolling default
0
- top (number) - Offset (in pixels) applied to the header default
- css (object) Classes applied to the HTML structure
- header (string) - Added to the header that scrolls with the table default
StickyTableHeader
- scrolling (string) - Added to the header when it is scrolling with the viewport default
is-scrolling
- active (string) - Added to the original table when plugin is active default
is-stickyTableHeaderActive
- header (string) - Added to the header that scrolls with the table default
Methods
You can get at the instance by accessing it from the elements .data
method
$('.table-container').stickyTableHeader(); const instance = $('.table-container').data('stickyTableHeader'); instance.destroy();
destroy
Removes the sticky header element and scroll listener
Development
yarn is required or you can use npm
to run the individual scripts yourself
- Clone the repository
yarn
yarn start
Run the tests with yarn test
and view the demo at http://localhost:3002/test