DataTables example Complex headers (rowspan / colspan)

Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.

In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and rendered on the page for you. This allows the columns.visibleDT option and column().visible()DT method to take into account rowspan / colspan cells, drawing the header correctly.

Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering.

The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.

NameHR InformationContact
PositionSalaryOfficeExtn.
NamePositionSalaryOfficeExtn.
Airi Satou Accountant $162,700 Tokyo 5407
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797
Ashton Cox Junior Technical Author $86,000 San Francisco 1562
Bradley Greer Software Engineer $132,000 London 2558
Brenden Wagner Software Engineer $206,850 San Francisco 1314
Brielle Williamson Integration Specialist $372,000 New York 4804
Bruno Nash Software Engineer $163,500 London 6222
Caesar Vance Pre-Sales Support $106,450 New York 8330
Cara Stevens Sales Assistant $145,600 New York 3990
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224
Showing 1 to 10 of 57 entries

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

1
2
3
4
5
6
7
8
$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [ {
            "visible": false,
            "targets": -1
        } ]
    } );
} );

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