@zhitkov/sticky-table NPM

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.

Sticky Table Cover

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);
    })
});