responsive.details.target

Since: Responsive 1.0.0

Column / selector for child row display control when using column details type.
Please note - this property requires the Responsive extension for DataTables.

Description

When the column type is selected for the responsive.details.type option, this option provides the ability to control what element in the table will activate the show / hide control in each row. This can be one of an column index, or a jQuery selector, as detailed below.

If the inline option is used for responsive.details.type this option has no effect.

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

number

Description:

Column index to which the show / hide control should be attached. This can be >=0 to count columns from the left, or <0 to count from the right.

Please note that the column defined here should have the class dtr-control added to it. This allows the Responsive CSS to display a control icon to the end user.

string

Description:

As a string, this option is used as a jQuery selector to determine what element(s) will activate the show / hide control for the details child rows. This provides the ability to use any element in a table - for example you can use the whole row, or a single img element in the row.

As an empty string the user's ability to activate the row details through Responsive's default click action is removed.

Default

Value: 0

Examples

Use the column control type and target the right most column:

new DataTable('#myTable', {
	responsive: {
		details: {
			type: 'column',
			target: -1
		}
	},
	columnDefs: [
		{
			className: 'dtr-control',
			orderable: false,
			targets: -1
		}
	]
});

Use the whole row to show / hide the details row:

new DataTable('#myTable', {
	responsive: {
		details: {
			type: 'column',
			target: 'tr'
		}
	}
});