{hero}

responsive.details.type

Since: Responsive Responsive 1.0.0

Set the child row display control type.
Please note - this property requires the Responsive extension for DataTables.

Description

Responsive has two built in methods of managing how the child row display control is shown to the end user:

  • inline - where the first column in the table has additional padding added to it and the :before pseudo element is used to display the button.
  • column - where a whole column is dedicated to the show / hide control.

The inline style is useful if you already have a table that you quickly want to add Responsive to without changing its structure, while the column type can be useful if you don't want the first column's layout to be modified by the padding required to make space for the inline display.

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.

Type

string

Description:

The child row display type to use. This can be one of:

  • inline - Use the first column to display the control element
  • column - Use a whole column to display the control element. Note that if used as a column type and the target option is set to be a column index, the class assigned to that column in the DataTable should be control to allow the CSS to display a visual show / hide control to the end user.

Default

  • Value: inline

Example

Use the column control type:

$('#example').DataTable( {
	responsive: {
		details: {
			type: 'column'
		}
	},
	columnDefs: [ {
		className: 'control',
		orderable: false,
		targets:   0
	} ],
	order: [ 1, 'asc' ]
} );