jquery-stickytable

jQuery Sticky Table Headers plugin

Usage no npm install needed!

<script type="module">
  import jqueryStickytable from 'https://cdn.skypack.dev/jquery-stickytable';
</script>

README

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

Source