jquery-stickytable

jQuery Sticky Table Headers plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
jquery-stickytable
933.0.05 years ago7 years agoMinified + gzip package size for jquery-stickytable in KB

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

  • http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
  • http://tympanus.net/Tutorials/StickyTableHeaders/