DataTables example Complex headers with column visibility

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 rowspan 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
Tiger Nixon System Architect $320,800 Edinburgh 5421 [email protected]
Garrett Winters Accountant $170,750 Tokyo 8422 [email protected]
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 [email protected]
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 [email protected]
Airi Satou Accountant $162,700 Tokyo 5407 [email protected]
Brielle Williamson Integration Specialist $372,000 New York 4804 [email protected]
Herrod Chandler Sales Assistant $137,500 San Francisco 9608 [email protected]
Rhona Davidson Integration Specialist $327,900 Tokyo 6200 [email protected]
Colleen Hurst Javascript Developer $205,500 San Francisco 2360 [email protected]
Sonya Frost Software Engineer $103,600 Edinburgh 1667 [email protected]
Jena Gaines Office Manager $90,560 London 3814 [email protected]
Quinn Flynn Support Lead $342,000 Edinburgh 9497 [email protected]
Charde Marshall Regional Director $470,600 San Francisco 6741 [email protected]
Haley Kennedy Senior Marketing Designer $313,500 London 3597 [email protected]
Tatyana Fitzpatrick Regional Director $385,750 London 1965 [email protected]
Michael Silva Marketing Designer $198,500 London 1581 [email protected]
Paul Byrd Chief Financial Officer (CFO) $725,000 New York 3059 [email protected]
Gloria Little Systems Administrator $237,500 New York 1721 [email protected]
Bradley Greer Software Engineer $132,000 London 2558 [email protected]
Dai Rios Personnel Lead $217,500 Edinburgh 2290 [email protected]
Jenette Caldwell Development Lead $345,000 New York 1937 [email protected]
Yuri Berry Chief Marketing Officer (CMO) $675,000 New York 6154 [email protected]
Caesar Vance Pre-Sales Support $106,450 New York 8330 [email protected]
Doris Wilder Sales Assistant $85,600 Sydney 3023 [email protected]
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797 [email protected]
Gavin Joyce Developer $92,575 Edinburgh 8822 [email protected]
Jennifer Chang Regional Director $357,650 Singapore 9239 [email protected]
Brenden Wagner Software Engineer $206,850 San Francisco 1314 [email protected]
Fiona Green Chief Operating Officer (COO) $850,000 San Francisco 2947 [email protected]
Shou Itou Regional Marketing $163,000 Tokyo 8899 [email protected]
Michelle House Integration Specialist $95,400 Sydney 2769 [email protected]
Suki Burks Developer $114,500 London 6832 [email protected]
Prescott Bartlett Technical Author $145,000 London 3606 [email protected]
Gavin Cortez Team Leader $235,500 San Francisco 2860 [email protected]
Martena Mccray Post-Sales support $324,050 Edinburgh 8240 [email protected]
Unity Butler Marketing Designer $85,675 San Francisco 5384 [email protected]
Howard Hatfield Office Manager $164,500 San Francisco 7031 [email protected]
Hope Fuentes Secretary $109,850 San Francisco 6318 [email protected]
Vivian Harrell Financial Controller $452,500 San Francisco 9422 [email protected]
Timothy Mooney Office Manager $136,200 London 7580 [email protected]
Jackson Bradshaw Director $645,750 New York 1042 [email protected]
Olivia Liang Support Engineer $234,500 Singapore 2120 [email protected]
Bruno Nash Software Engineer $163,500 London 6222 [email protected]
Sakura Yamamoto Support Engineer $139,575 Tokyo 9383 [email protected]
Thor Walton Developer $98,540 New York 8327 [email protected]
Finn Camacho Support Engineer $87,500 San Francisco 2927 [email protected]
Serge Baldwin Data Coordinator $138,575 Singapore 8352 [email protected]
Zenaida Frank Software Engineer $125,250 New York 7439 [email protected]
Zorita Serrano Software Engineer $115,000 San Francisco 4389 [email protected]
Jennifer Acosta Junior Javascript Developer $75,650 Edinburgh 3431 [email protected]
Cara Stevens Sales Assistant $145,600 New York 3990 [email protected]
Hermione Butler Regional Director $356,250 London 1016 [email protected]
Lael Greer Systems Administrator $103,500 London 6733 [email protected]
Jonas Alexander Developer $86,500 San Francisco 8196 [email protected]
Shad Decker Regional Director $183,000 Edinburgh 6373 [email protected]
Michael Bruce Javascript Developer $183,000 Singapore 5384 [email protected]
Donna Snider Customer Support $112,000 New York 4226 [email protected]
Name Position Salary Office Extn. E-mail

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.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.