Custom Fixed Table Header In JavaScript – stickyThead.js

An easy yet configurable sticky table header library that sticks the thead of an HTML table to the top of the page with or without offset.

How to use it:

1. Download and load the JavaScript file stickythead.js from the dist folder.

<script src="./dist/stickythead.js"></script>

2. Apply the stickyThead to your HTML table and done.

stickyThead.apply(document.querySelectorAll('table'))

3. Note that your HTML table must have a thead element.

<table>
  <thead>
    <tr class="header">
      ...
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

4. Apply an offset to the table header when got stuck. Default: 0.

stickyThead.apply(document.querySelectorAll('table'),{
  fixedOffset: document.querySelector('#header')
})

5. Determine whether to cache the table height for better performance. Default: false.

stickyThead.apply(document.querySelectorAll('table'),{
  cacheHeaderHeight: true
})

6. Specify the CSS z-index of the sticky table header. Default: 3.

stickyThead.apply(document.querySelectorAll('table'),{
  zIndex: 999
})

7. Determine the scrollable area. Default: window.

stickyThead.apply(document.querySelectorAll('table'),{
  scrollableArea: document.querySelector('.container')
})

8. Destroy the library.

stickyThead.apply(document.querySelectorAll('table', 'destroy');