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.