Accessible Sticky Table Header Plugin - jQuery stickyTableHeader

stickyTableHeader is a simple to use jQuery plugin to make table header sticky by cloning the thead element and inserting it into a new table with the CSS 'position: fixed' property. With support for screen reader and multiple fixed tabled headers on one page.

How to use it:

1. Install the stickyTableHeader and import it into your project.

npm install jquery-sticky-table-header --save

const $ = require('jquery');
require('jquery-sticky-table-header');

2. Or include the JavaScript file jquery.stickyTableHeader.js after jQuery JavaScript library as this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stickyTableHeader.js"></script>

3. Wrap the html table into a DIV container. Note that your html table must have thead and tbody elements as shown below:

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th colspan="2">Some data</th>
        <th colspan="2">Some data</th>
        <th colspan="2">Some data</th>
      </tr>
      ...
    </thead>
    <tbody>
      <tr>
        <td>First row</td>
        <td>Aliquam sed</td>
        <td>Donec lobortis pharetra</td>
        <td>Proin pretium</td>
        <td>Duis porttitor dui elit</td>
        <td>Aliquam placerat ante</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

4. Initialize the plugin and you're done.

$('.table-container').stickyTableHeader();

5. Options and defaults.

$('.table-container').stickyTableHeader({
  outsideViewportOnly: true,
  scrollThrottle: 50,
  css: {
    header: "StickyTableHeader",
    scrolling: "is-scrolling",
    active: "is-stickyTableHeaderActive"
  },
  zIndex: 2
});

6. Change the default styles when the table header gets sticky & is scrolling.

$('.table-container').stickyTableHeader({
  outsideViewportOnly: true,
  scrollThrottle: 50,
  css: {
    header: "StickyTableHeader",
    scrolling: "is-scrolling",
    active: "is-stickyTableHeaderActive"
  },
  zIndex: 2
});

Changelog:

v1.1.1 (2019-05-17)

• Fix issue with table using tfoot

v1.1.0 (2019-01-16)

• Add offset option
• Fix issue where all event handlers were unbound

v1.0.0 (2018-03-31)

• Updated

---

This awesome jQuery plugin is developed by simonsmith. For more Advanced Usages, please check the demo page or visit the official website.