Float table heads when they get to the top of the page
Package: float-head
Created by: ForbesLindesay
Last modified: Sat, 18 Jun 2022 02:13:33 GMT
Version: 0.0.8
License: CC BY-SA 4.0
Downloads: 157
Repository: https://github.com/ForbesLindesay/float-head
Install
npm install float-head
yarn add float-head
float-head
Float table heads when they get to the top of the page. Built on top of https://github.com/mkoryak/floatThead but made suitable for browserifying.
Installation
npm install float-head
Usage
var floatHead = require('float-head');
//if you have jQuery in the global context, you should do the
//following instead:
// var floatHead = require('float-head/global-jquery');
var floated = floatHead('table.float-head', options);
// to reflow the header (usually triggered automatically)
floated.reflow();
// to stop floating the header
floated.destroy();
floatHead(selector, options);
Takes a selector or an element and, assuming it's a table, floats the header.
Options:
| Name | Type | Default | Description |
|---|---|---|---|
| scrollContainer | function | null | Defines a container element inside of which the table scrolls vertically and/or horizontally. usually a wrapping div |
| scrollingTop | number or function | 0 | Offset from the top of the window where the floating header will 'stick' when scrolling down |
| scrollingBottom | number or function | 0 | Offset from the bottom of the window where the floating header will 'stick' when scrolling down |
| useAbsolutePositioning | boolean | true | Position the floated header using absolute positioning or using fixed positioning. Fixed positioning performs better with tables that use window scrolling, but fails miserably on highly dynamic pages where DOM can be suddenly modified causing the location of the floated table to shift. (You should call table.reflow() in this case, but you can't always instrument your code to make that call.) |
| debounceResizeMs | number | 1 | The headers are repositioned on resize. Because this event has the potential to fire a bunch of times, it is debounced. This is the debounce rate. |
| zIndex | number | 1001 | z-index of the floating header |
| cellTag | string | th | Specifies which tag is used to find header cells (in the table's thead element) |
| 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 (tbody tr:visible:first td) contains td elements with colspans, then you need to return another set of tds which have no colspans. In other words the selector should return the same number of TDs as columns in your table. Here is an example |
Returns an object with two methods:
floated.reflow();floated.destroy();
floatHead.reflow(selector) / floated.reflow()
Triggers a reflow of the selected table. This is likely to be necessary after adding or removing any DOM elements.
floatHead.destroy(selector) / floated.destroy()
Calling this stops the header from continuing to float.
Updating
To create an updated build, simply clone this repo then run node build 1.2.2 where (1.2.2 is replaced witht the desired version of floatThead).
License
Built on top of floatThead by @mkoryak
