jQuery Plugin To Fix Table header When Scrolling - floatThead

jQuery Plugin To Fix Table header When Scrolling - floatThead
File Size: 40.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.1.2 (2018-04-17)

v2.1.1 (2018-02-21)

  • HUGE performance improvement if plugin used on multiple tables on the same page. Over 10x faster startup time on a page with 39 tables. 
  • Adding a 'floatContainerOverflow' option to govern floatContainer CSS
  • Fix printing on firefox
  • Set header size on reflow
  • Works better on iPad Retina

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.