jQuery Plugin For Sticky Table Cells - stickyTable.js

jQuery Plugin For Sticky Table Cells - stickyTable.js
File Size: 98.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

stickyTable.js is a lightweight jQuery plugin that makes the columns or rows of your long html table sticky when scrolling. Heavily based on CSS 'relative' position property. jQuery is used only to toggle the corresponding CSS classes on scroll event.

How to use it:

1. First you need to include jQuery library and the jQuery stickyTable plugin's files on the html page.

<link rel="stylesheet" href="jquery.stickytable.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stickytable.min.js"></script>

2. Then wrap your html table into a container with the CSS classes of 'sticky-table & sticky-headers' and then specify the table cells which should be sticky using the 'sticky-cell' class as shown below:

<div class="sticky-table sticky-headers sticky-ltr-cells">
  <table class="table table-striped">
    <thead>
      <tr class="sticky-row">
        <th class="sticky-cell">Ford</th>
        <th>Escort</th>
        <th>Blue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>
</div>

3. That's it. To support RTL table, just add replace the CSS class 'sticky-ltr-cells' with 'sticky-rtl-cells'.

<div class="sticky-table sticky-headers sticky-rtl-cells">
  <table class="table table-striped">
    <thead>
      <tr class="sticky-row">
        <th class="sticky-cell">Ford</th>
        <th>Escort</th>
        <th>Blue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
      <tr>
        <td class="sticky-cell">Ford</td>
        <td>Escort</td>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>
</div>

Changelog:

2018-06-28

  • Feat: add support to footers and opposite columns

2018-02-03

  • Fix: Call scroll events upon triggering stickyTable Event

2018-01-11

  • Fix: Disable smooth scrolling on sticky-table for mouse wheel event on IE11

2018-01-10

  • Fix: prevent sticky from having a padding

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