jQuery Sticky Table Headers

Make your table headers sticky

This is a version of the sticky table code originally written by Terry Munn, wrapped in a jquery plugin to make it more reusable. I also added some new options and functions.

Installing / Getting started

Install via NPM:

npm install --save jquery-stickytable

Include jQuery(>=1.12.4) and jquery-stickytable in your head:

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-stickytable.min.js"></script>

and the css:

<link rel="stylesheet" type="text/css" href="path/to/jquery-stickytable.css">

Files can be found in dist folder:

dist/
├── jquery-stickytable.css
├── jquery-stickytable.js        (UMD)
├── jquery-stickytable.min.js    (UMD, compressed)
└── jquery-stickytable.esm.js    (ES Module, includes css)

Usage

Load stickyTable on your table:

$('#myTable').stickyTable(options);

By default just the header of the table (eg. the thead) is sticky. Biaxial headers are possible — this is for situations where both horizontal and vertical headers are needed. To enable, just wrap the first element in each tbody row in a th instead of a td:

  <tbody>
    <tr>
      <th>Sticky column</th>
      <td>value A</td>
      <td>value B</td>
      ...
    </tr>
    ...
  </tbody>

Options

Option	Description
copyTableClass	When true copies any classes on the target table to the sticky table. Default is true.
copyEvents	When true copies any events on the target table to the sticky table. An example would be if there was a click event on a th element in the thead to do sorting, this would carry over to the sticky column header th. Default is false.
overflowy	When true adds an overflow-y class to the sticky table wrapper (ie. sticky-wrap class). This means the table will scroll vertically and only be as tall as it's parent div (see .sticky-wrap.overflow-y in css). Default is false.

Methods

Methods cannot be called until the stickyTable plugin has been initialized on the element.

destroy

Completely removes sticky table classes and elements and destroys the instance.

  $('#myTable').stickyTable('destroy');

Styles

The sticky headers have default colors set, but you can override this css:

.sticky-wrap .sticky-intersect th {
    background-color: #666; 
    color: #eee; 
}
 
.sticky-wrap th {
    background-color: #666; 
    color: #eee; 
}

Exceptions

If target element is not a table.
If plugin has not been initialised when calling a method
If method is private
If method does not exist