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
• Responsive scrolling
  Hybrid of above. At some screen sizes horizontal scrolling happens within a container, vertical scrolling within the window

Window scrolling

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

Overflow scrolling

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

Responsive window scrolling

var $table = $('table.demo');
$table.floatThead({
    responsiveContainer: function($table){
        return $table.closest('.table-responsive');
    }
});

Options

Methods

.floatThead('destroy')

Removes the widget from the table, returns a function to reinit the plugin with original options

var $table = $('table.demo1');
// float the headers
$table.floatThead({top: 25});
// unfloat the headers
var reinit = $table.floatThead('destroy');
// ... later you want to re-float the headers with same options
reinit();

.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 Consumed

reflow

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

Events Produced

floatThead

$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.floatThead(...);

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

reflowed

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

The plugin will trigger this event on the table after every reflow. It can be useful to know when the plugin is done with its header re-layout.

At least one reflow is guaranteed on init, but others will follow. Note that these conditions may generate multiple reflow events. It may be wise to debounce the event handler.

Reflow will happen on:

• Plugin init
• $(window).on('load') (for tables with images)
• $(window).on('resize')
• Sort, filter or paginate within a datatable
• Manually trigger the reflow event or call the reflow method on the table
• Switch to a bootstrap 3 or jQueryUI tab containing $table
• With autoReflow option enabled, modify the table DOM

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({
	position: 'fixed'
});

Open Issues

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

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

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 beer!

Or... why program when you can look at cat pictures?! Probably because you can't earn a living doing that? Or can you?
You decide.

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

Install Using NPM

npm install floatthead

License