FixedColumns example CSS row sizing

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:

  • none - no automatic row height matching is performed. CSS can be used in this case and is useful when speed is of primary importance.
  • semiauto (default) - the height calculation will be performed once, and the result cached to be used again (fnRecalculateHeight can be used to force recalculation)
  • auto - height matching is performed on every draw (slowest but must accurate)

This example shows row height matching switched off but there is a CSS statement of tr { height: 50px } to force all rows to the same height.

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

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

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.