Fixed first column with DataTables

Getting a fixed or frozen first column in a DataTables table that stays in place whilst the user scrolls on the X-axis.

This is handy for smaller screen sizes and when the first column is the “index” for the table i.e A name or product.

DataTables fixed first column example

Achieving a fixed first column in DataTables is simple you just need to add a couple of config parameters and then include a CSS and JS file.

Add the following config parameters into your DataTables initialization:

scrollX: true,
fixedColumns: true


$(document).ready(function() {
    $('#table-id').DataTable( {
        scrollX:        true,
        fixedColumns:   true
    } );
} );

Then you will need the DataTables fixed columns CSS styling:

And the fixed columns Javascript:

Ensuring that you put it below the main DataTables JS and jQuery.

My CodePen example.

This post was made from the official documentation.