jQuery Plugin To Fix Table header When Scrolling - floatThead

jQuery Plugin To Fix Table header When Scrolling - floatThead
File Size: 44.5 KB
Views Total: 21984
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.

Want to have sticky table columns? Check out the stickyColumn plugin, which is an extension to the floatThead plugin that makes the table thead and first n columns always be visible (sticky) when you scroll the page vertically or horizontally.

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
  }
  
});

Changelog:

v2.2.4 (2021-09-02)

v2.2.3 (2021-08-20)

  • Bugfix

v2.2.2 (2021-08-18)

  • fix aria label being properly read by screen readers when navigating a table.
  • Fix jQuery 3+ warnings

v2.2.1 (2020-06-02)

  • Fix destroy function when using autoReflow with multiple tables

v2.2.0 (2020-05-29)

  • Fix destroy function when using autoReflow with multiple tables
  • Support hidden columns in tables that have an existing colgroup
  • TypeScript definitions

v2.1.4 (2019-08-02)

  • Added ariaLabel function to the config object to give more flexibilty on the values the plugin uses
  • Improve RTL support.
  • Aria label does not work with quotes.

v2.1.3 (2019-01-16)

  • Bugfix

v2.1.2 (2018-04-17)

  • Update

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.