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

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.