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.

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

Example:

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

Then you will need the DataTables fixed columns CSS styling:

https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.dataTables.min.css

And the fixed columns Javascript:

https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js

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

My CodePen example.

This post was made from the official documentation.