Create Sticky Table Headers Using JavaScript – sticky-table.js

Preview:

Description:

Using sticky table headers is a great way to emphasize the header of your table and make it more legible. However, setting up responsive sticky headers isn’t so straightforward when you want to add them through tables themselves. This is where a JavaScript library like Sticky Table Headers can help you.

This sticky table header library supports all screen sizes. Table headers that stick to the top of your table as a user scrolls down. This library is for both desktop and mobile, it uses your content to calculate height so the headers can be shown correctly on all screen sizes.

How to use it:

1. Install & download.

# Yarn
$ yarn add @zhitkov/sticky-table
# NPM
$ npm i @zhitkov/sticky-table

2. Import the JavaScript library.

<script src="/path/to/dist/bundle.umd.js"/>

3. Initialize the StickyTable on your HTML table. That’s it.

document.addEventListener('DOMContentLoaded', () => {
  const tableElements = document.querySelectorAll('.js-table');
  tableElements.forEach(tableElement => {
    new window.StickyTable(tableElement);
  })
});