Responsive Datatable

Configuration option

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.

`new` constructor

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.

Immediately show hidden details

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.

With Buttons - Column visibility

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.

With FixedHeader

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.

With ColReorder

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.

Column controlled child rows

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.

First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Showing 1 to 10 of 57 entries

Column control - right

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.

First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Showing 1 to 10 of 57 entries

Whole row child row control

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.

First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Showing 1 to 10 of 57 entries

Vertical scrolling

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.