# 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 | Position | Contact
--- | --- | ---
HR info | Direct
Tiger Nixon | System Architect | $320,800 | Edinburgh | 5421 | t.nixon@datatables.net
Garrett Winters | Accountant | $170,750 | Tokyo | 8422 | g.winters@datatables.net
Ashton Cox | Junior Technical Author | $86,000 | San Francisco | 1562 | a.cox@datatables.net
Cedric Kelly | Senior JavaScript Developer | $433,060 | Edinburgh | 6224 | c.kelly@datatables.net
Airi Satou | Accountant | $162,700 | Tokyo | 5407 | a.satou@datatables.net
Brielle Williamson | Integration Specialist | $372,000 | New York | 4804 | b.williamson@datatables.net
Herrod Chandler | Sales Assistant | $137,500 | San Francisco | 9608 | h.chandler@datatables.net
Rhona Davidson | Integration Specialist | $327,900 | Tokyo | 6200 | r.davidson@datatables.net
Colleen Hurst | JavaScript Developer | $205,500 | San Francisco | 2360 | c.hurst@datatables.net
Sonya Frost | Software Engineer | $103,600 | Edinburgh | 1667 | s.frost@datatables.net
Jena Gaines | Office Manager | $90,560 | London | 3814 | j.gaines@datatables.net
Quinn Flynn | Support Lead | $342,000 | Edinburgh | 9497 | q.flynn@datatables.net
Charde Marshall | Regional Director | $470,600 | San Francisco | 6741 | c.marshall@datatables.net
Haley Kennedy | Senior Marketing Designer | $313,500 | London | 3597 | h.kennedy@datatables.net
Tatyana Fitzpatrick | Regional Director | $385,750 | London | 1965 | t.fitzpatrick@datatables.net
Michael Silva | Marketing Designer | $198,500 | London | 1581 | m.silva@datatables.net
Paul Byrd | Chief Financial Officer (CFO) | $725,000 | New York | 3059 | p.byrd@datatables.net
Gloria Little | Systems Administrator | $237,500 | New York | 1721 | g.little@datatables.net
Bradley Greer | Software Engineer | $132,000 | London | 2558 | b.greer@datatables.net
Dai Rios | Personnel Lead | $217,500 | Edinburgh | 2290 | d.rios@datatables.net
Jenette Caldwell | Development Lead | $345,000 | New York | 1937 | j.caldwell@datatables.net
Yuri Berry | Chief Marketing Officer (CMO) | $675,000 | New York | 6154 | y.berry@datatables.net
Caesar Vance | Pre-Sales Support | $106,450 | New York | 8330 | c.vance@datatables.net
Doris Wilder | Sales Assistant | $85,600 | Sydney | 3023 | d.wilder@datatables.net
Angelica Ramos | Chief Executive Officer (CEO) | $1,200,000 | London | 5797 | a.ramos@datatables.net
Gavin Joyce | Developer | $92,575 | Edinburgh | 8822 | g.joyce@datatables.net
Jennifer Chang | Regional Director | $357,650 | Singapore | 9239 | j.chang@datatables.net
Brenden Wagner | Software Engineer | $206,850 | San Francisco | 1314 | b.wagner@datatables.net
Fiona Green | Chief Operating Officer (COO) | $850,000 | San Francisco | 2947 | f.green@datatables.net
Shou Itou | Regional Marketing | $163,000 | Tokyo | 8899 | s.itou@datatables.net
Michelle House | Integration Specialist | $95,400 | Sydney | 2769 | m.house@datatables.net
Suki Burks | Developer | $114,500 | London | 6832 | s.burks@datatables.net
Prescott Bartlett | Technical Author | $145,000 | London | 3606 | p.bartlett@datatables.net
Gavin Cortez | Team Leader | $235,500 | San Francisco | 2860 | g.cortez@datatables.net
Martena Mccray | Post-Sales support | $324,050 | Edinburgh | 8240 | m.mccray@datatables.net
Unity Butler | Marketing Designer | $85,675 | San Francisco | 5384 | u.butler@datatables.net
Howard Hatfield | Office Manager | $164,500 | San Francisco | 7031 | h.hatfield@datatables.net
Hope Fuentes | Secretary | $109,850 | San Francisco | 6318 | h.fuentes@datatables.net
Vivian Harrell | Financial Controller | $452,500 | San Francisco | 9422 | v.harrell@datatables.net
Timothy Mooney | Office Manager | $136,200 | London | 7580 | t.mooney@datatables.net
Jackson Bradshaw | Director | $645,750 | New York | 1042 | j.bradshaw@datatables.net
Olivia Liang | Support Engineer | $234,500 | Singapore | 2120 | o.liang@datatables.net
Bruno Nash | Software Engineer | $163,500 | London | 6222 | b.nash@datatables.net
Sakura Yamamoto | Support Engineer | $139,575 | Tokyo | 9383 | s.yamamoto@datatables.net
Thor Walton | Developer | $98,540 | New York | 8327 | t.walton@datatables.net
Finn Camacho | Support Engineer | $87,500 | San Francisco | 2927 | f.camacho@datatables.net
Serge Baldwin | Data Coordinator | $138,575 | Singapore | 8352 | s.baldwin@datatables.net
Zenaida Frank | Software Engineer | $125,250 | New York | 7439 | z.frank@datatables.net
Zorita Serrano | Software Engineer | $115,000 | San Francisco | 4389 | z.serrano@datatables.net
Jennifer Acosta | Junior JavaScript Developer | $75,650 | Edinburgh | 3431 | j.acosta@datatables.net
Cara Stevens | Sales Assistant | $145,600 | New York | 3990 | c.stevens@datatables.net
Hermione Butler | Regional Director | $356,250 | London | 1016 | h.butler@datatables.net
Lael Greer | Systems Administrator | $103,500 | London | 6733 | l.greer@datatables.net
Jonas Alexander | Developer | $86,500 | San Francisco | 8196 | j.alexander@datatables.net
Shad Decker | Regional Director | $183,000 | Edinburgh | 6373 | s.decker@datatables.net
Michael Bruce | JavaScript Developer | $183,000 | Singapore | 5384 | m.bruce@datatables.net
Donna Snider | Customer Support | $112,000 | New York | 4226 | d.snider@datatables.net
Name | Position | Salary | Office | Extn. | E-mail

- JavaScript
- HTML
- CSS
- Ajax
- Server-side script

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

`new DataTable('#example', { columnDefs: [ { targets: -1, visible: false } ] });`

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.