sticky-table

sticky-table is a library for sticky table headers written in TypeScript. With this library you can easily set sticky table headers on your website. It's responsive, accessible and super tiny.

Features

• Written in TypeScript, no dependencies needed
• Lightweight (gzip: ~1.7kb)
• No additional CSS needed

Install

npm

npm install @zhitkov/sticky-table

yarn

yarn add @zhitkov/sticky-table

script tag

<script src="https://unpkg.com/@zhitkov/sticky-table@latest/dist/bundle.umd.js"/>

Usage

<table class="js-table">
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            ...
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            ...
            <td>...</td>
        </tr>
    </tbody>
</table>

document.addEventListener('DOMContentLoaded', () => {
    const tableElements = document.querySelectorAll('.js-table');

    tableElements.forEach(tableElement => {
        new window.StickyTable(tableElement);
    })
});

Development

Clone this repository and run:

npm start

Demo

Check out the demo

Browser Compatibility

Library is using ECMAScript 5 features.

• IE 9+
• Chrome 23+
• Firefox 21+
• Safari 6+
• Opera 15+

License

MIT © Konstantin Zhitkov