The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table, or using the DataTables initialisation options. This method shows the latter, with the responsive option being set to the boolean value true. The responsive option 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 column which 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/hide control for the rows.

When using the column child 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.target option, which can be either a column index, or a jQuery selector. This example shows the last column in the table being used as the control column.

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