Row details

This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.

The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's display. This is set up using columns.data and columns.defaultContent, in combination with CSS to show an empty cell with a background image which can be clicked upon.

The event handler makes use of the row().child methods to firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the format() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show. Note that the format details function has access to the full data source object for the row, including information that is not actually shown in the table (the salary parameter for example).

Furthermore, this example shows a small difference from the client-side row details example in that to have rows automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row id. This is required because in server-side processing mode rows are automatically destroyed and recreated on each draw.

	First name	Last name	Position	Office
	First name	Last name	Position	Office

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

function format(d) {
	return (
		'Full name: ' +
		d.first_name +
		' ' +
		d.last_name +
		'<br>' +
		'Salary: ' +
		d.salary +
		'<br>' +
		'The child row can contain any data you wish, including links, images, inner tables etc.'
	);
}

var table = $('#example').DataTable({
	ajax: 'scripts/ids-objects.php',
	columns: [
		{
			class: 'dt-control',
			orderable: false,
			data: null,
			defaultContent: ''
		},
		{ data: 'first_name' },
		{ data: 'last_name' },
		{ data: 'position' },
		{ data: 'office' }
	],
	order: [[1, 'asc']],
	processing: true,
	serverSide: true
});

// Array to track the ids of the details displayed rows
var detailRows = [];

$('#example tbody').on('click', 'tr td.dt-control', function () {
	var tr = $(this).closest('tr');
	var row = table.row(tr);
	var idx = detailRows.indexOf(tr.attr('id'));

	if (row.child.isShown()) {
		tr.removeClass('details');
		row.child.hide();

		// Remove from the 'open' array
		detailRows.splice(idx, 1);
	}
	else {
		tr.addClass('details');
		row.child(format(row.data())).show();

		// Add to the 'open' array
		if (idx === -1) {
			detailRows.push(tr.attr('id'));
		}
	}
});

// On each draw, loop over the `detailRows` array and show any child rows
table.on('draw', function () {
	detailRows.forEach(function (id, i) {
		$('#' + id + ' td.dt-control').trigger('click');
	});
});

function format(d) {
	return (
		'Full name: ' +
		d.first_name +
		' ' +
		d.last_name +
		'<br>' +
		'Salary: ' +
		d.salary +
		'<br>' +
		'The child row can contain any data you wish, including links, images, inner tables etc.'
	);
}

const table = new DataTable('#example', {
	ajax: 'scripts/ids-objects.php',
	columns: [
		{
			class: 'dt-control',
			orderable: false,
			data: null,
			defaultContent: ''
		},
		{ data: 'first_name' },
		{ data: 'last_name' },
		{ data: 'position' },
		{ data: 'office' }
	],
	order: [[1, 'asc']],
	processing: true,
	serverSide: true
});

// Array to track the ids of the details displayed rows
const detailRows = [];

table.on('click', 'tbody td.dt-control', function () {
	let tr = event.target.closest('tr');
	let row = table.row(tr);
	let idx = detailRows.indexOf(tr.id);

	if (row.child.isShown()) {
		tr.classList.remove('details');
		row.child.hide();

		// Remove from the 'open' array
		detailRows.splice(idx, 1);
	}
	else {
		tr.classList.add('details');
		row.child(format(row.data())).show();

		// Add to the 'open' array
		if (idx === -1) {
			detailRows.push(tr.id);
		}
	}
});

// On each draw, loop over the `detailRows` array and show any child rows
table.on('draw', () => {
	detailRows.forEach((id, i) => {
		let el = document.querySelector('#' + id + ' td.dt-control');

		if (el) {
			el.dispatchEvent(new Event('click', { bubbles: true }));
		}
	});
});

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.

Row details

Other examples

Basic initialisation

Advanced initialisation

Data sources

Language and Internationalisation

DateTime

Plug-ins

Styling

Layout

API

Ajax

Server-side

DataTables