Usage

Internal scrollingThe table is inside of a container with overflow:auto

Page scrollingHeader becomes locked at the top of the page as user scrolls down

Page scrolling is the default. Initialize floatThead without any params to use it. $('table').floatThead()

Internal scrolling takes a bit more work. You must specify a container element inside of which the table will scroll.
You must create this element. Usually a div will wrap the table with overflow:auto and a size smaller than the table.

Options

Note: all the options which are functions take a single argument: $table - the table who's header is being floated. ex: function($table){ ... }

Name

type

default

description

scrollContainer

function

null

Defines a contaier 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

getSizingRow

function

null

The plugin uses the first row in the table body to calculate floated header's column sizes. It expects this row to contain <td>s with colspan of at most 1. If the first row does not meet that requirement, you must implement this function.

Returns: jquery object containing tds. Length of this element much match the number of columns in the table.example use

useAbsolutePositioning

boolean

true

Position the floated header using absolute positioning or using fixed positioning. Fixed positioning peforms 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 .floatThead('reflow') in this case, but you cant 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 in the header to specify cells
example use

.floatThead('reflow')

Events

$table.trigger('reflow')

Given a table element $table that has been widgetized, a reflow event causes the header to realign itself to the correct position. This event must be triggered if the DOM is modifed in such a way that the widgetized table's location changes.

var $table = $('table.demo1');
$table.floatThead();
//change the location of the table in the dom:
$table.css('marginTop', 100);
//cause the floated header to be properly positioned again:
$table.trigger('reflow');

Examples

Internal Scrolling

Internal scrolling is used when the table is inside of a container smaller than itself.
This also demonstrates the reflow method. When a DOM modification causes the table's location to change, you must call this method on the table.

Page Scrolling

Page scrolling isused when you have a large table that takes up the whole screen.Code

$('table.demo2').floatThead({
scrollingTop: 41,
// I need this offset because i dont
// want the table header to overlap
//my site navigation
useAbsolutePositioning: false
// absolutePositioning is better for
//highly dynamic sites
//(which this is not)
});

Known Issues

Issues list is pulled from github

There are no issues! Yey!

Download

This plugin is in beta.
You can grab the latest non-minified version at github
and a minified version here (4.6K Minified version can lag behind latest version!!)
To report issues, visit the project's github repository page.

NOTE: The code included on this page is used for developing new features and fixing bugs. Use the code in github.