jQuery Plugin To Fix Table header When Scrolling - floatThead

jQuery Plugin To Fix Table header When Scrolling - floatThead

floatThead is a jQuery sticky table header plugin that freezes your table thead element at top of the page/container when scrolling. Works with window/container/responsive scrolling. Compatible with most popular framework and JS libraries such as Bootstrap, jQuery UI, datatablesperfectScrollbar, etc.


$ npm install floatthead
# Bower
$ bower install floatthead

Basic usage:

1. Include the JavaScript file jquery.floatThead.js after jQuery library and the floatThead is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.floatThead.js"></script>

2. Note that your html table must have the thead element:


3. Calling the function on the html table will make the table header sticky on window scrolling.


4. Make the table header sticky at the top of its parent container when scrolling.

  scrollContainer: function($table){
    return $table.closest('.tableContainer');

5. All default plugin options to customize the sticky table header.

  // thead cells
  headerCellSelector: 'tr:visible:first>*:visible', 
  // zindex of the floating thead (actually a container div)
  zIndex: 1001, 
  // 'fixed', 'absolute', 'auto'. auto picks the best for your table scrolling type.
  position: 'auto', 
  // offset from top of window where the header should not pass above
  top: 0, 
  // offset from the bottom of the table where the header should stop scrolling
  bottom: 0, 
  // or boolean 'true' (use offsetParent) | function -> if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
  scrollContainer: function($table) { 
    return $([]);
  // only valid if scrollContainer is not used (ie window scrolling). this is the container which will control y scrolling at some mobile breakpoints
  responsiveContainer: function($table) { 
    return $([]);
  // this is only called when using IE,
  // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col)
  // it should return a jquery object containing a wrapped set of table cells comprising a row that contains no col spans and is visible
  getSizingRow: function($table, $cols, $fthCells){ 
    return $table.find('tbody tr:visible:first>*:visible');
  // default CSS classes
  floatTableClass: 'floatThead-table',
  floatWrapperClass: 'floatThead-wrapper',
  floatContainerClass: 'floatThead-container',
  // copy 'class' attribute from table into the floated table so that the styles match.
  copyTableClass: true, 
  // use MutationObserver api to reflow automatically when internal table DOM changes
  autoReflow: false, 
  // debug mode
  debug: false, 
  // should we bind events that expect these frameworks to be present and/or check for them?
  support: { 
    bootstrap: true,
    datatables: true,
    jqueryUI: true,
    perfectScrollbar: true

Change logs:

v2.0.3 (2018-01-26)

  • set header size on reflow


  • fixed util/isFunction bug

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

  • Publication date: 26.01.2018
  • Source