FixedColumns

When making use of DataTables' x-axis scrolling feature (scrollX), you may wish to fix the left or right most columns in place. This extension for DataTables provides exactly this option (for non-scrolling tables, please use the FixedHeader extension, which will create sticky headers and footers for tables).

FixedColumns (as of version 4+) makes use of position: sticky in CSS. All evergreen browsers have good support for this property, but legacy browsers such as Internet Explorer do not.

Download

The easiest way to get and use FixedColumns 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

FixedColumns can be initialised and used in two different ways:

  • As part of the DataTables constructor with the fixedColumns configuration option
  • A new constructor (note that this can be used for a single table at a time only).

In DataTables

FixedColumns can be initialised on a DataTable by using the fixedColumns 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( {
    fixedColumns: true
} );

Constructor

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

  1. The DataTable instance to apply the buttons to
  2. The FixedColumns options (this is the same as the options available for the fixedColumns option.
var table = $('#myTable').DataTable();

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

Features

FixedColumns provides the following features for a horizontally scrolling table:

  • Freezes the left most column to the side of the table
  • Option to freeze two or more columns
  • Full integration with DataTables' scrolling options