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

Additional complexity

It is important to state up front that utilising FixedColumns in your DataTable can significantly increase the complexity of the table and its use should not be undertaken lightly, particularly for complex tables. The reason for this is in how FixedColumns operates - the fixed columns are actually separate tables from the original DataTable (i.e. they are separate table elements) which are styled to look like they are visually part of the original table. These fixed tables are then positioned over the original DataTable.

This means that any events attached to the DataTable need to also take into account the fixed tables. Equally, any updates that are made to the original DataTable needs to also update the fixed tables!

If you refer to the DataTables compatibility chart you will be able to see that most incompatibilities are between FixedColumns and the other extensions for exactly this reason.

This is not to say that FixedColumns is not useful - it absolutely can be. But you need to be aware of the additional complexity that it will introduce into your software.

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

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