FixedHeader

When displaying tables with a particularly large amount of data shown on each page, it can be useful to have the table's header and / or footer fixed to the top or bottom of the scrolling window. This lets your users quickly determine what each column refers to rather than needing to scroll back to the top of the table.

FixedHeader provides the ability to perform this action with DataTables tables. It operates by detaching the header and footer elements from the host table and attaching them to the top or bottom of the screen as required by the scrolling position of the window. This ensures that FixedColumns is fully compatible with DataTables and you can add complex interactions such as search elements in the table footer, just as you would with any other table.

Download

The easiest way to get and use FixedHeader is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.

Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.

Initialisation

FixedHeader can be initialised and used in two different ways:

As part of the DataTables constructor with the fixedHeader configuration option
A new constructor

In DataTables

FixedHeader can be initialised on a DataTable by using the fixedHeader option in the DataTables options object - this is simply a boolean value, although it is also possible to use an object for fine grained control (see the reference documentation):

$('#myTable').DataTable( {
    fixedHeader: true
} );

Constructor

Alternatively, FixedHeader can be added to a table after it has been constructed using the Javascript new keyword with the $.fn.dataTable.FixedHeader function. This function takes two parameters:

The DataTable instance to apply the buttons to
The FixedHeader options (this is the same as the options available for the fixedHeader option.

var table = $('#myTable').DataTable();

new $.fn.dataTable.FixedHeader( table, {
    // options
} );

Features

FixedHeader adds the following features to DataTables:

Fix the table header to the top of a scrolling window
Optionally fix the table footer to the bottom of a scrolling window
Full integration with Bootstrap and other DataTables supported styling frameworks
Integration with other DataTables extensions such as Responsive and ColReorder