Datatables - Responsive
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.
First Name | Last Name | Job Title | DOB | Status | Actions |
---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | |
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | |
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending |
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.
First Name | Last Name | Job Title | DOB | Status | Actions | |
---|---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | ||
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | ||
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | ||
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | ||
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | ||
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | ||
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | ||
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | ||
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | ||
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | ||
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | ||
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | ||
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | ||
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | ||
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending |
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.
First Name | Last Name | Job Title | DOB | Status | Actions | |
---|---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | ||
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | ||
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | ||
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | ||
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | ||
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | ||
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | ||
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | ||
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | ||
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | ||
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | ||
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | ||
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | ||
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | ||
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending |
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.
First Name | Last Name | Job Title | DOB | Status | Actions | |
---|---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | ||
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | ||
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | ||
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | ||
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | ||
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | ||
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | ||
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | ||
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | ||
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | ||
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | ||
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | ||
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | ||
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | ||
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending |