Complex Headers (rowspan And Colspan) - DataTables Example

DataTables Advanced interaction features for your tables. Editor Comprehensive editing library for DataTables. Manual Download

• Examples
  • Basic initialisation
  • Advanced initialisation
  • Styling
  • Data sources
  • API
  • Ajax
  • Server-side
  • Plug-ins
• Manual
• Reference
• Extensions
• Plug-ins
• Blog
• Forums
• Support
• FAQs
• Download
• Purchase

≡ Show site navigation 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 cells suitable for the columns the element covers.

As of DataTables 2, columns do not require their own unique header cell as was the case with DataTables 1.x - multiple columns can share a single colspan element, as shown in the example below. Only the Name column has a cell unique to it. Furthermore, when activating ordering on a colspan cell, it will automatically enable multi-column ordering for the applicable columns.

DataTables will automatically apply ordering listeners and icons to all cells in the table header. If you wish to disable this, you can use the data-dt-order property on the th/td cells in the table header. The value of this attribute (if present, it is entirely optional) controls the ordering listeners and icons:

• data-dt-order="disable" - Ordering listeners will not be attached to these cells, nor will ordering status icons be shown.
• data-dt-order="icon-only" - Ordering listeners will not be attached to these cells, but the ordering status icons will be shown.

If not defined, the cell will have an ordering listener attached and status icons shown (unless disabled with the columns.orderable option). See the columns.orderable option for more details.

In the example below, the HR info has data-dt-order="disable" applied to it. The other cells in the header are all clickable and have ordering status icons shown.

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
• Comments

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

$('#example').DataTable(); new DataTable('#example');

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

Basic initialisation

• Zero configuration
• Feature enable / disable
• Default ordering (sorting)
• Multi-column ordering
• Multiple tables
• Hidden columns
• Complex headers (rowspan and colspan)
• Flexible table width
• State saving
• Alternative pagination
• Data rendering
• Scroll - vertical
• Scroll - vertical, dynamic height
• Scroll - horizontal
• Scroll - horizontal and vertical

Advanced initialisation

• DOM / jQuery events
• DataTables events
• Column rendering
• Enter Key to Search
• Page length options
• Complex headers with column visibility
• Read HTML to data objects
• HTML5 data-* attributes - cell data
• HTML5 data-* attributes - table options
• Setting defaults
• Row created callback
• Row grouping
• Footer callback
• Order direction sequence control
• DOM element return from renderer

Data sources

• HTML (DOM) sourced data
• Ajax sourced data
• Javascript sourced data
• Server-side processing

Language and Internationalisation

• Language - display data type
• Auto-locale display
• Locale based number display
• Language - auto render
• Language options
• Language - Comma decimal place
• Right-to-left language support
• Remote language file
• Remote language file + local definitions

DateTime

• ISO8601 detection
• Auto-locale display (Moment.js)
• Auto-locale display (Luxon)
• Date rendering (Moment.js)
• Date rendering (Luxon)
• Format transform (Moment.js)
• Format transform (Luxon)
• Ordering formatted dates (Moment.js)
• Ordering formatted dates (Luxon)

Plug-ins

• API plug-in methods
• Ordering plug-ins (with type detection)
• Ordering plug-ins (no type detection)
• Custom filtering - range search
• Live DOM ordering

Styling

• Base style
• Base style - no styling classes
• Base style - cell borders
• Base style - compact
• Base style - hover
• Base style - order-column
• Base style - row borders
• Base style - stripe
• Bootstrap 3
• Bootstrap 4
• Bootstrap 5
• Foundation
• Fomantic-UI (formally Semantic-UI)
• Bulma
• jQuery UI ThemeRoller
• Material Design (Tech. preview)
• Tailwind CSS (Tech. preview)
• UIKit 3 (Tech. preview)

Layout

• Table controls positioning
• Table controls positioning with options
• Grid layout
• Element IDs and classes
• Multiple table control elements
• Custom controls - nodes
• Custom controls - defined by functions
• Custom controls - plug-ins
• Legacy dom option

API

• Add rows
• Individual column searching (text inputs)
• Individual column searching (select inputs)
• Highlighting rows and columns
• Child rows (show extra / detailed information)
• Child rows with StateSave
• Row selection (multiple rows)
• Row selection and deletion (single row)
• Form inputs
• Index column
• Show / hide columns dynamically
• Using API in callbacks
• Scrolling and Bootstrap tabs
• Search API (regular expressions)
• HighCharts Integration

Ajax

• Ajax data source (arrays)
• Ajax data source (objects)
• Nested object data (objects)
• Nested object data (arrays)
• Orthogonal data
• Generated content for a column
• Custom data source property
• Flat array data source
• Deferred rendering feature

Server-side

• Server-side processing
• Custom HTTP variables
• POST data
• Return key to search
• Automatic addition of row ID attributes
• Object data source
• Row details
• JSONP data source for remote domains
• Deferred loading of data
• Pipelining data to reduce Ajax calls for paging

DataTables

DataTables designed and created by SpryMedia Ltd. © 2007-2024 MIT licensed. Privacy policy. Supporters. SpryMedia Ltd is registered in Scotland, company no. SC456502.