Accessible Sticky Table Header Plugin in Jquery

File Size:7.23 KB
Views Total:247
Last Update:December 24, 2017
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

Sticky Table Header jquery plugin for use table header sticky by cloning the thead element and inserting it into a new table header fixed position property. some time long list of table With support for screen reader and multiple fixed table headers on one page.

How to use it:

  1.  Add  JavaScript file:
    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="jquery.stickyTableHeader.js"></script>
  2.  Wrap the html table into a DIV container:
    <div class="table-container">
      <table class="table">
        <thead>
          <tr>
            <th colspan="2">Some data</th>
            <th colspan="2">Some data</th>
            <th colspan="2">Some data</th>
          </tr>
          ...
        </thead>
        <tbody>
          <tr>
            <td>First row</td>
            <td>Aliquam sed</td>
            <td>Donec lobortis pharetra</td>
            <td>Proin pretium</td>
            <td>Duis porttitor dui elit</td>
            <td>Aliquam placerat ante</td>
          </tr>
          ...
        </tbody>
      </table>
    </div>
  3.  Initialize the plugin with Options:
    $('.table-container').stickyTableHeader({
      outsideViewportOnly: true,
      scrollThrottle: 50,
      css: {
        header: "StickyTableHeader",
        scrolling: "is-scrolling",
        active: "is-stickyTableHeaderActive"
      },
      zIndex: 2
    });

    Done 🙂