FixedColumns example Bootstrap

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.

Note that FixedColumns is suitable only for use with the scrolling features in DataTables. If you want to achieve a similar effect without scrolling enabled, please checkout FixedHeader, also for DataTables.

FixedColumns is initialised using the constructor new $.fn.dataTable.FixedColumns(); - shown below.

The Javascript shown below is used to initialise the table shown in this example:

?
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false
    } );
    new $.fn.dataTable.FixedColumns( table );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2014
DataTables is licensed under the MIT license.