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.

Responsive will automatically detect new DataTable instances being created on a page and initialize itself if it finds the responsive option or responsive class name on the table, as shown in the other examples.

Responsive has the ability to display the details that it has hidden in a variety of different ways. Its default is to allow the end user to toggle the the display by clicking on a row and showing the information in a DataTables child row. At times it can be useful not to require end user interaction to display the hidden data in a responsive manner, which can be done with the childRowImmediate display type.

Responsive's default mode to show information that is hidden due to columns being removed from the table is to show the hidden details in a child row (row().child()). However, you may wish to use the child row for other purposes or you may simply wish to use a different method of showing the row's information. This can be achieved with the modal display type.

Buttons is an extension for DataTables that provides a framework for control buttons, and also a number of default button sets. This example shows the use of Responsive with the colvis button type, demonstrating how Responsive works with column visibility in DataTables.

This example shows Responsive being used with the DataTables FixedHeader extension. FixedHeader will lock a table's header to the top of the table, ensuring that the user always knows what each column relates to.

This example demonstrates the use of Responsive with the ColReorder extension for DataTables, which provides the ability to reorder columns using click and drag on the column headers.

Responsive has two built in methods for displaying the controlling element of the child rows; inline which is the default option and 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.

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 shows Responsive in use with the scrollY option to present a scrolling table (instead of using paging as the other Responsive examples do). Responsive will automatically work with the table in such a configuration.