Small, accessible sticky table header plugin
Clone or download
Latest commit 3b6833a Mar 31, 2018

jquery.stickyTableHeader Build Status

A small (2.4kb gzipped) and accessible jQuery plugin for adding sticky headers to large data tables.



  • Supports multiple tables on one page
  • Uses position: fixed that allows smooth scrolling and a wide range of browser support
  • Screenreader support
  • Minimal DOM updates in scroll event



It's recommended to require/import the plugin as part of an existing webpack or browserify setup:

npm install jquery jquery-sticky-table-header --save
// index.js
const $ = require('jquery');

Relies on jQuery as a peerDependency so ensure it is installed in your application.


  1. Clone the repository
  2. yarn && yarn run build or npm install && npm run build
  3. A UMD version of the plugin will be available in the ./build directory.
  4. Include it in your project as needed


<script src=""></script>
<script src="jquery.stickyTableHeader.js"></script>


There are some HTML requirements for the plugin to function correctly:

  • The table must be inside a containing element
  • There must be a thead element
  • There must be a tbody element


<div class="table-container">
      <!-- content -->
      <!-- content -->

It's recommended that you apply a background colour to the header to mask the real table header beneath it.


  • outsideViewportOnly - (boolean) Only run the plugin if the table is larger than the viewport default true
  • scrollThrottle - (number) Maximum number of times the scroll handler can be called over time in milliseconds default 50
  • zIndex - (number) Added to the header to control stacking default 2
  • css (object) Classes applied to the HTML structure
    • header (string) - Added to the header that scrolls with the table default StickyTableHeader
    • scrolling (string) - Added to the header when it is scrolling with the viewport default is-scrolling
    • active (string) - Added to the original table when plugin is active default is-stickyTableHeaderActive


You can get at the instance by accessing it from the elements .data method

const instance = $('.table-container').data('stickyTableHeader');


Removes the sticky header element and scroll listener


yarn is required or you can use npm to run the individual scripts yourself

  1. Clone the repository
  2. yarn
  3. yarn start

Run the tests with yarn test and view the demo at http://localhost:3002/test