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

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" 
<script src="dist/js/freeze-table.js"></script>

2. Wrap your HTML table into a container element.

<div class="example">
  <table class="table">
        <td>[email protected]</td>
        <td>[email protected]</td>
        <td>[email protected]</td>

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


4. To freeze multiple table columns:

  'columnNum': 2

5. More configuration options with default values:

  // 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.


7. Disable the plugin.


8. Destroy the plugin.


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

  • Publication date: 14.11.2018
  • Source