jQuery Plugin To Fix Table Header On Scrolling | floatThead

jquery-fixed-table-header

floatThead is a jQuery sticky table header plugin that freezes the table element at the top of the page/container on hover.

Table header floats in the scroll. You don’t need to make any changes to your HTML/CSS, it just works. Supports header float while scrolling inside a window or while scrolling inside a container with overflow. Supports responsive tables.

How to make use of it:

Installation:

# NPM
$ npm install floatthead

# Bower
$ bower install floatthead

1. Include the JavaScript file jquery.floatThead.js after jQuery library and the floatThead is prepared to be used.

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

2. Note that your html desk will need to have the thead component:

<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 on the top of its parent container when scrolling.

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

5. All default plugin choices to customise 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
  }
  
});

Options

    
positionstring‘auto’Valid values: 'auto''fixed''absolute'.
Position the floated header using absolute or fixed positioning mode (auto picks best for your table scrolling type). Try switching modes if you encounter layout problems.
scrollContainerfunction or truenullDefines a container element inside of which the table scrolls vertically and/or horizontally. If boolean true is used, then we use the table’s offsetParent.
responsiveContainerfunctionnullDefines a responsive container element inside of which the table scrolls horizontally (at some resolutions), everything else behaves like window scrolling. This option cannot be used together with scrollContainer the option. bootstrap3 example
ariaLabelfunction($table, $headerCell, columnIndex) => $headerCell.text()This function returns the aria-label use for every header cell in the real table.
headerCellSelectorstringtr:first>th:visibleSpecifies the selector used to find header cells (in the table’s thead element)
floatTableClassstringfloatThead-tableThis class is added to the table element after you run floatThead on it
floatContainerClassstringfloatThead-containerThis class is added to the container div inside of which your thead will spend time floating
topnumber or function0Offset from the top of the window where the floating header will ‘stick’ when scrolling down
bottomnumber or function0Offset from the bottom of the window where the floating header will ‘stick’ when scrolling down
zIndexnumber1001z-index of the floating header
debugbooleanfalsePoint out various possible issues via console.log if it is available
getSizingRowfunctionundefined

Used by IE Only

If your table’s first visible row (tbody tr:visible:first>*) contains td or th elements with colspans, then you need to return another set of cells that have no colspans. In other words, the selector should return the same number of cells as columns in your table. In-depth docs

copyTableClassbooleantrueShould the table’s class attribute be copied to the floated table? This makes the styles written for the table’s class selector apply also to the floated header. However, if you are later selecting this table by the class you may be surprised to find 2 tables.
autoReflowbooleanfalse

Experimental

use MutationObserver (on good browsers) to reflow automatically when the internal table DOM changes, or DOM within scrollContainer

jQuery Plugin To Fix Table header When Scrolling, jquery.floatThead Plugin/Github


See Demo And Download

Official Website(mkoryak): Click Here

This superior jQuery/javascript plugin is developed by mkoryak. For extra Advanced Usage, please go to the official website.

Share