Stucky - sticky table headers
This is a pretty simple to use sticky table headers implementation. Not a ton of features, but who needs them anyways.
Oh, and a nice bonus is that it doesn't require jQuery!
Features
Once initialized, your tables should hopefully get awesome sticky headers.
- If you have a
<thead />
, you'll get a horizontal sticky header row - If you have
<th />
s inside your<tbody>
tag, you'll get a vertical sticky header row. - If you have both - well, god darn it, you'll get all the stickies.
Browser compatibility
Tested and working in latest evergreen browsers, on both desktop and phones, as
well as IE 9 or newer. Note that in order for IE9 to work, you need a
classList
polyfill. The demo.js
also uses babel-polyfill
,
which adds some ES5 methods.
Installation
The package is available via NPM:
$ npm install --save stucky
If you don't believe in package managers, you can grab either the uncompressed or the minified version.
Usage
I like stuff to be simple to use. When the DOM is loaded, simply add this:
// Import the scripts; // Select the tables you want to have sticky headersconst $tables = ...document; // Set up optionsconst opts = // If you have a fixed header, this px value will let you account for it topMargin: 0 // Remove the header this px value before the end of the table allowance: 0 // Space separated class names to apply to the table wrapper wrapperClasses: ''; // Initiate them$tables;
A note about styles
There are some styles that are required for this to work. You'll find it here - but it's also included in the NPM package if you want to use it directly. Just make sure they are included somehow!
Open open source
We ❤️ pull requests! If you want to help out, feel free to create an issue, or even better - create a pull request to go with it. If I like your work, I'll make sure to make you a contributor :)
Development
If you'd like to submit a pull request or fork this project, I've already set up some basic build tasks:
$ npm run build # Build the project $ npm start # Start a dev server and open the demo page in a new tab