Usage

• Overflow scrolling
  The table is inside of a container with overflow:auto
• Window scrolling
  Header becomes locked at the top of the page as user scrolls down

Window scrolling

var $table = $('table.demo');
$table.floatThead();

Overflow scrolling

var $table = $('table.demo');
$table.floatThead({
    scrollContainer: function($table){
        return $table.closest('.wrapper');
    }
});

Options

Methods

.floatThead('destroy')

Removes the widget from the table

var $table = $('table.demo1');
//float the headers
$table.floatThead();
//unfloat the headers
$table.floatThead('destroy');

.floatThead('reflow')

Cause header to realign itself to the correct position. Same as the reflow event below.

var $table = $('table.demo1');
//float the headers
$table.floatThead();
$table.floatThead('reflow');

.floatThead('getRowGroups')

Returns the table's thead, tbody and tfoot elements. Useful because you cannot simply select thead if the table's header is currently being floated.
For more info on why you may want this read through this example

Events

$table.trigger('reflow')

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

$table.on('floatThead', function(e, isFloated, $floatContainer){..}

var $table = $('table.demo2');

$table.on("floatThead", function(e, isFloated, $floatContainer){
    if(isFloated){
        $floatContainer.addClass("floated"); // the div containing the table containing the thead
        $(this).addClass("floated"); // $table
    } else {
        $floatContainer.removeClass("floated");
        $(this).removeClass("floated");
    }
});

table.floated {
  background-color: #d5ffd5;
}

Examples

var $demo1 = $('table.demo1');
$demo1.floatThead({
	scrollContainer: function($table){
		return $table.closest('.wrapper');
	}
});
$('a#change-dom').click(function(){ //click to remove
	$(this).parent().remove();
	//DOM has changed. must reflow floatThead
	$demo1.floatThead('reflow');
});

$('table.demo2').floatThead({
	useAbsolutePositioning: false
	// absolutePositioning is better for
	// highly dynamic sites
	// (which this is not)
});

Open Issues

Issues are pulled from github There are a bunch of closed issues!

• There are no issues! I can finally retire!

Common Problems

Can't get the plugin to work on your site?

Take a look at this list of things that will cause the plugin to not work: Ideal HTML structure

Search the issues on github, maybe someone else had the same problem and solved it. There are a bunch of closed issues, so chances are your issue is not a unique snowflake :)

If all else fails, post a new issue on github. Be sure to include a simple, reproducible example of your issue on jsfiddle.

When I help you solve your problem, buy me a coffee!

Download

Download Latest Release:

Inside of that zip the following javascript files are of interest to you:

• /dist/jquery.floatThead.js = development version
• /dist/jquery.floatThead.min.js = production version

if your project includes underscore and you want to save a few bytes you can use the slim version:

• /dist/jquery.floatThead-slim.js
• /dist/jquery.floatThead-slim.min.js

Unstable pre-release code

Are you a hipster who likes running code with unreleased features and bugs?

I know I do, because that is the code that runs on this doc site.

Head right over to the /dist directory on the master branch and enjoy.

CDN Hosted

jQuery.floatThead is hosted on cdnjs.com, though sometimes it takes a bit for a new version to propagate there.

Install Using Bower

bower install floatThead

License