The Responsiveextension for DataTables can be applied to a DataTable in one of two ways; with a specific class nameon the table, or using the DataTables initialisation options. This method shows the latter, with the responsiveoption being set to the boolean value true. The responsiveoption can be given as a boolean value, or as an object with configuration options.

Responsive has two built in methods for displaying the controlling element of the child rows; inline(default) option shows the control in the first column, and columnwhich set a control column as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show/hidecontrol for the rows.

When using the columnchild row control type, Responsive has the ability to use any column or element as the show/hide control for the row details. This is provided through the responsive.details.targetoption, which can be either a column index, or a jQuery selector. This example shows the lastcolumn in the table being used as the control column.

When using the columndetails type in Responsive the responsive.details.targetoption provides the ability to control what element is used to show/hide the child rows when the table is collapsed. This example uses the trselector to have the whole row act as the control.