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.
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 name | Last name | Position | Office | Age | Start date | Salary | Extn. |
---|---|---|---|---|---|---|---|
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 name | Last name | Position | Office | Age | Start date | Salary | Extn. |
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 name | Last name | Position | Office | Age | Start date | Salary | Extn. |
---|---|---|---|---|---|---|---|
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 name | Last name | Position | Office | Age | Start date | Salary | Extn. |
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 name | Last name | Position | Office | Age | Start date | Salary | Extn. |
---|---|---|---|---|---|---|---|
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 name | Last name | Position | Office | Age | Start date | Salary | Extn. |