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
| position | string | ‘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. |
| scrollContainer | function or true | null | Defines 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. |
| responsiveContainer | function | null | Defines 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 |
| ariaLabel | function | ($table, $headerCell, columnIndex) => $headerCell.text() | This function returns the aria-label use for every header cell in the real table. |
| headerCellSelector | string | tr:first>th:visible | Specifies the selector used to find header cells (in the table’s thead element) |
| floatTableClass | string | floatThead-table | This class is added to the table element after you run floatThead on it |
| floatContainerClass | string | floatThead-container | This class is added to the container div inside of which your thead will spend time floating |
| top | number or function | 0 | Offset from the top of the window where the floating header will ‘stick’ when scrolling down |
| bottom | number or function | 0 | Offset from the bottom of the window where the floating header will ‘stick’ when scrolling down |
| zIndex | number | 1001 | z-index of the floating header |
| debug | boolean | false | Point out various possible issues via console.log if it is available |
| getSizingRow | function | undefined | Used by IE Only If your table’s first visible row ( |
| copyTableClass | boolean | true | Should 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. |
| autoReflow | boolean | false | Experimental use MutationObserver (on good browsers) to reflow automatically when the internal table DOM changes, or DOM within |
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.
