JarCastingjQuery 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