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

File Size: 146 KB
Views Total: 28879
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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',

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


7. Disable the plugin.


8. Destroy the plugin.



v1.3.0 (2019-04-26)

  • Added FastMode feature

v1.2.0 (2019-04-23)

  • Added Container and Scrollable options


  • Allow backgroundColor with false


  • Add ColumnKeep option


  • Hide plugin while window scroll-x


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