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
Name	HR info			Direct
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

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

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

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.

Complex headers with column visibility

Other examples

Basic initialisation

Advanced initialisation

Data sources

Language and Internationalisation

DateTime

Plug-ins

Styling

Layout

API

Ajax

Server-side

DataTables