Stucky

Sticky table headers to the people!

Download View on Github

(no jQuery required)

Enjoy the stickyness in 1 - 2 - 3!

Sticky table headers is a feature you're expecting to find on modern websites today. It eases consumption of datasets by giving you the context you need right away. Now you can get them on your website in only a few seconds!

  1. Install it 

    $ npm install stucky --save

  2. Import it

    import Stucky from 'stucky'

  3. Initialize it

    const $table = document.querySelector('#sticky-table')
new Stucky($table);

Usage

Using Stucky is as simple as we showed above, but you can also specify a few options. This is done at initialization time. Here's an annotated example: 

import Stucky from 'stucky';

// Grab the table(s) you want to have sticky headers.
const $tables = [...document.querySelectorAll('table')];

// Shared options
const 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: 100,
    // Space separated class names to apply to the table wrapper
    wrapperClasses: ''
};

// Initialize each of your tables, and you're done!
$tables.forEach($table => new Stucky($table));

Here's a few examples

Sample data courtesy of randomuser.me.

A table with headers
Name Address E-mail
A wide table
Name Address E-mail Phone number Username Gender Nationality
Vertical headings
Vertical and horizontal headings
Name Address E-mail Phone number Username Gender Nationality