Complex headers (rowspan and colspan)

When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column.

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener, if more than one cell for a column if found. The orderCellsTop option can be used to tell DataTables to use the top cell if you prefer.

The example shown below has two sets of grouped information, grouped by colspan in the header.

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

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

$(document).ready(function() { $('#example').DataTable(); } );

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.

Other examples