Stick Table Element To Top/Bottom/Left/Right - jQuery sticky.js

A simple-to-use jQuery sticky table plugin that sticks any table elements (thead, tbody, tfoot, th, tr, td, etc) to the top, bottom, left and/or right in a large HTML table.

How to use it:

1. Add jQuery JavaScript library and the jQuery sticky.js plugin to the html page.

<link rel="stylesheet" href="stickytable.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="sticky.js"></script>

2. Initialize the plugin on the HTML table and we're ready to go.

$(function(){
  $('table').sticky();
});

3. Specify the table elements to be sticky using the data-sticky-POSITION attributes:

<table class="example" 
       data-sticky-top="tr:first-child" 
       data-sticky-left="tr td:first-child" 
       data-sticky-bottom="tr:last-child" 
       data-sticky-right="tr td:last-child"
>
  ...
</table>

4. You can also specify the table elements to be sticky during init as follows:

$(function(){
  $('table').sticky({
    top: "tr:first-child",
    left: "tr td:first-child",
    right: "tr:last-child",
    bottom: "tr td:last-child"
  });
});

5. Event handlers.

$('table').on('sticky-table-susses', function() {
  console.log("add-sticky-table-susses");
});

$('table').on('sticky-table-start', function() {
  console.log("add-sticky-table-start");
});

$('table').on('sticky-table-removed', function() {
  console.log("sticky-table-removed");
});

Changelog:

2019-04-12

• JS & CSS updated

2019-03-01

• rewritten

---

This awesome jQuery plugin is developed by lethevinh. For more Advanced Usages, please check the demo page or visit the official website.