jQuery Plugin For Sticky Table Headers And Columns - RWD Freeze Table

RWD Freeze Table is a powerful yet easy-to-use jQuery plugin to make table columns and/or headers stay in place when scrolling.

Key Features:

• Sticks table headers to the top when scrolling down.
• Sticks table columns to the left when the table width is greater than the container width.
• Custom styles for the sticky table headers and columns.
• Supports dynamic table content.
• Compatible with the latest Bootstrap 4 framework.

How to use it:

1. Load the JavaScript file freeze-table.js after loading jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="dist/js/freeze-table.js"></script>

2. Wrap your HTML table into a container element.

<div class="example">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

3. Call the function on the top container to freeze the table header and the first column.

$(".example").freezeTable();

4. To freeze multiple table columns:

$(".example").freezeTable({
  'columnNum': 2
});

5. More configuration options with default values:

$(".example").freezeTable({
  // freeze table header
  freezeHead: true,
  // freeze table columns
  freezeColumn: true,
  // freeze column(s) header (entire column)
  freezeColumnHead: true,
  // show fixed scrollbar
  scrollBar: false,
  // css class for the fixed navbar (Bootstrap)
  fixedNavbar: '.navbar-fixed-top',
  // namespace
  namespace: 'freeze-table',
  // the number of table columns to freeze
  columnNum: 1,
  // border width
  columnBorderWidth: 1,
  // custom styles
  columnWrapStyles: null,
  headWrapStyles: null,
  columnHeadWrapStyles: null,
  backgroundColor: 'white',
  // show shadow effect
  shadow: false,
  // callback
  callback: null
  
});

6. Update the plugin for dynamic HTML table.

$(".example").freezeTable('update');

7. Disable the plugin.

$(".example").freezeTable('unbind');

8. Destroy the plugin.

$(".example").freezeTable('destroy');

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