responsive.details

Since: Responsive Responsive 1.0.0

Enable and configure the child rows shown by Responsive for collapsed tables. Please note - this property requires the Responsive extension for DataTables.

Description

Responsive has the ability to use DataTables' child rows feature to show information about any columns which have been removed from the display as a child row, which can be particularly useful for display complex information on small screen devices. Please see the Responsive manual on the details rows for further information.

This options provides the ability to configure how the details rows are handled by Responsive. In its simplest form as a boolean value, the details row display can be enabled or disabled, while as an object you have the ability to control how the rows are displayed and the control to show / hide the child rows.

Please note that as with all other configuration options for Responsive, this option is an extension to the default set of DataTables options. This property should be set in the DataTables initialisation object.

Types

boolean

Description:

As a boolean value, this option will enable and disable the child row display of Responsive. false will disable the child rows completely (columns will simply be removed from the disable and their content not be accessible other than through the DataTables API), while true will enable the child rows, using the default values defined by the object $.fn.dataTables.Responsive.defaults.details.

object

Description:

When given as an object, the child row display of Responsive will be enabled, and configuration options can be given to extend or override the defaults.

Default

  • Value: true

Child rows will be disabled using the inline method (see responsive.details.type).

Examples

Disable the details row display:

$('#example').DataTable( {
	responsive: {
		details: false
	}
} );

Set the type option for the details display:

$('#example').DataTable( {
	responsive: {
		details: {
			type: 'column'
		}
	}
} );