FixedColumns example Assigned column width

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.widthDT option.

This example shows the first column being set to width: 200px (note that this is not pixel perfect in a table, the browser will make some adjustments!), a width that is reflected in the fixed column. Resize the browser window horizontally and you will be able to see that the fixed column retains its width while the scrolling viewport and the table resize.

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

Plain text
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    var table = $('#example').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        columnDefs: [
            { width: 200, targets: 0 }
        ]
    } );
    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.