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.visible option and column().visible() 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.

Name HR Information Contact
Position Salary Office Extn. E-mail
Name Position Salary Office Extn. E-mail
Tiger Nixon System Architect $3,120 Edinburgh 5421
Garrett Winters Director $5,300 Edinburgh 8422
Ashton Cox Technical Author $4,800 San Francisco 1562
Cedric Kelly Javascript Developer $3,600 Edinburgh 6224
Jenna Elliott Financial Controller $5,300 Edinburgh 5407
Brielle Williamson Integration Specialist $4,525 New York 4804
Herrod Chandler Sales Assistant $4,080 San Francisco 9608
Rhona Davidson Integration Specialist $6,730 Edinburgh 6200
Colleen Hurst Javascript Developer $5,000 San Francisco 2360
Sonya Frost Software Engineer $3,600 Edinburgh 1667
Jena Gaines System Architect $5,000 London 3814
Quinn Flynn Financial Controller $4,200 Edinburgh 9497
Charde Marshall Regional Director $5,300 San Francisco 6741
Haley Kennedy Senior Marketing Designer $4,800 London 3597
Tatyana Fitzpatrick Regional Director $2,875 London 1965
Michael Silva Senior Marketing Designer $3,750 London 1581
Paul Byrd Javascript Developer $5,000 New York 3059
Gloria Little Systems Administrator $3,120 New York 1721
Bradley Greer Software Engineer $3,120 London 2558
Dai Rios System Architect $4,200 Edinburgh 2290
Jenette Caldwell Financial Controller $4,965 New York 1937
Yuri Berry System Architect $3,600 New York 6154
Caesar Vance Technical Author $4,965 New York 8330
Doris Wilder Sales Assistant $4,965 Edinburgh 3023
Angelica Ramos System Architect $2,875 London 5797
Gavin Joyce Developer $4,525 Edinburgh 8822
Jennifer Chang Regional Director $4,080 London 9239
Brenden Wagner Software Engineer $3,750 San Francisco 1314
Ebony Grimes Software Engineer $2,875 San Francisco 2947
Russell Chavez Director $3,600 Edinburgh 8899
Michelle House Integration Specialist $3,750 Edinburgh 2769
Suki Burks Developer $2,875 London 6832
Prescott Bartlett Technical Author $6,730 London 3606
Gavin Cortez Technical Author $6,730 San Francisco 2860
Martena Mccray Integration Specialist $4,080 Edinburgh 8240
Unity Butler Senior Marketing Designer $3,750 San Francisco 5384
Howard Hatfield Financial Controller $4,080 San Francisco 7031
Hope Fuentes Financial Controller $4,200 San Francisco 6318
Vivian Harrell System Architect $4,965 San Francisco 9422
Timothy Mooney Financial Controller $4,200 London 7580
Jackson Bradshaw Director $5,000 New York 1042
Miriam Weiss Support Engineer $4,965 Edinburgh 2120
Bruno Nash Software Engineer $4,200 London 6222
Odessa Jackson Support Engineer $3,600 Edinburgh 9383
Thor Walton Developer $3,600 New York 8327
Finn Camacho Support Engineer $4,800 San Francisco 2927
Elton Baldwin Data Coordinator $6,730 Edinburgh 8352
Zenaida Frank Software Engineer $4,800 New York 7439
Zorita Serrano Software Engineer $5,300 San Francisco 4389
Jennifer Acosta Javascript Developer $2,875 Edinburgh 3431
Cara Stevens Sales Assistant $4,800 New York 3990
Hermione Butler Director $4,080 London 1016
Lael Greer Systems Administrator $3,120 London 6733
Jonas Alexander Developer $5,300 San Francisco 8196
Shad Decker Regional Director $5,300 Edinburgh 6373
Michael Bruce Javascript Developer $4,080 Edinburgh 5384
Donna Snider System Architect $3,120 New York 4226

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

$(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:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.