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',

  // Specify a document role element that contains the table. 
  // Default container is window. 
  container: false,

  // Enable Scrollable mode for inner scroll Y axis
  scrollable: false,

  // the number of table columns to freeze
  columnNum: 1,

  // freeze column(s) will always be displayed to support interactive table
  columnKeep: false,

  // border width
  columnBorderWidth: 1,

  // custom styles
  columnWrapStyles: null,
  headWrapStyles: null,
  columnHeadWrapStyles: null,

  // 'false' to skip
  backgroundColor: 'white',

  // show shadow effect
  shadow: false,
  
  // enable fast mode for better performance
  fastMode: 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');

Changelog:

v1.3.0 (2019-04-26)

• Added FastMode feature

v1.2.0 (2019-04-23)

• Added Container and Scrollable options

2019-02-07

• Allow backgroundColor with false

2019-01-12

• Add ColumnKeep option

2018-12-19

• Hide plugin while window scroll-x

2018-11-28

• Release height of table wrapper

---

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