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.

Installation:

# NPM
$ 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:

<table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
     <td>Sum</td>
     <td>$180</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
  </tr>
 </tbody>
</table>

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

$('table').floatThead();

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

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

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

$('table').floatThead({
  // 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

2017-06-02

  • 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