When displaying a table which scrolls along the x-axis, it can sometimes be useful to the end user for the left most column to be fixed in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns' in Excel. This can be achieved with the FixedColumns plug-in for DataTables, as shown below.

FixedColumns allows columns to be fixed from both the left and right hand sides of the table. Fixing right hand-side columns is done by using the fixedColumns.rightColumns initialisation parameter, which works just the same as fixedColumns.leftColumns does for the left side of the table. This example shows both the left and right columns being fixed in place.

FixedColumns allows columns to be fixed from both the left and right hand sides of the table. Fixing right hand-side columns is done by using the fixedColumns.rightColumns initialisation parameter, which works just the same as fixedColumns.leftColumns does for the left side of the table. This example shows both the left and right columns being fixed in place.

FixedColumns has the ability to freeze columns on both the left and right hand sides of the table. By default it will fix the first column on the left, but using the initialisation parameters fixedColumns.leftColumns and fixedColumns.rightColumns you can alter this to fix the columns on the right as well. This example shows a single column fixed in place, in this case the right most column.

FixedColumns operates with DataTables' built-in column visibility options (columns.visible and column().visible()), which columns that are hidden not being shown in the fixed columns. This integration also means that FixedColumns works well with the column visibility module of the Buttons extension, with columns that are dynamically shown and hidden updated immediately in the fixed columns.

Because of the method FixedColumns uses to display the fixed columns, an important consideration is the alignment of the rows due to different heights in the individual rows of the table. There are two different algorithms in FixedColumns which can be used, or you can switch off automatic row sizing all together. This is controlled through the heightMatch parameter. If can take the following values:

The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width of the column can be controlled using the columns.width option.

A typical interaction to want to perform with a fixed column, is an index column. A method for how this can be achieved with FixedColumns is shown in this example, building on the index column example for DataTables. Also shown in this example is how the fixed column can be styled with CSS to show it more prominently.

This example shows the Select extension for DataTables being used with FixedColumns. With Select the end user has the ability to select elements in the table - in the case below this is done by clicking on the table cells (including in the fixed column) to select cells. Select is enabled using select, which also provides its own configuration options.

The Select extension for DataTables has the ability to show a checkbox column to allow row selection and this is a natural fit for FixedColumns where you can have the checkbox column fixed and easily accessible.

If you are using multiple rows in the table header, it can be useful to have a row spanning cell on the column(s) you have fixed in place - equally at other times it can be useful to not and make use of the two or more cells per column. FixedColumns builds on the complex header support in DataTables to make this trivial to use in FixedColumns. Just initialize your FixedColumns instance as you normally would!

This example shows FixedColumns being configured with individual column filtering abilities. Note that the data-index attribute is attached to the input elements in order to track which column the input should filter. The event handler then uses this with the column() selector method to search the corresponding column.