#### Tables - Responsive

Statistics Invoices Schedule

##### Basic responsive table

Example of a basic `responsive` table. Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

First Name | Last Name | Job Title | DOB | Status |
--- | --- | --- | --- | --- | ---
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 |

##### Toggle columns

Example of `togglable` columns table. These tables work off the concept of breakpoints. These can be customized, but the default breakpoints are: `phone: 480`, `tablet: 1024`. You then need to tell the table which columns to hide on which breakpoints, by specifying `data-hide` attributes on the table head columns.

First Name | Last Name | Job Title | DOB | Status |
--- | --- | --- | --- | --- | ---
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 |

##### Row toggler

Example usage of a `row toggler`. This responsive table will automatically add the `"toggler"` to the first column by default. The "toggler" is the plus/minus icon which expands and collapses the row when a table breakpoint has fired. You can specify which of your columns is the toggle column (the column which has the toggle icon) by adding `data-toggle="true"`.

First Name | Last Name | Job Title | DOB | Status |
--- | --- | --- | --- | --- | ---
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 |

##### Header groups

Example of a responsive table with `header groups`. It is possible to have advanced table header setups where your column headers are grouped. The groupings will also be inside the detail rows as a heading. To use this method, add `data-group` to the table header cells that you want to group and add `.footable-group-row` to the group row.

Name | Details | Other
--- | --- | ---
First Name | Last Name | Job Title | DOB | Status |
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 |

##### Ignoring columns

Example of a responsive table with `hidden` columns on small screens. To use, add `data-ignore="true"` to the table header column. This data attribute will stop the column from being included in the detail row creation. This affects columns only in detail rows, in normal display mode this column will be visible. In this example `Status` column is hidden on smartphones.

First Name | Last Name | Job Title | DOB | Status |
--- | --- | --- | --- | --- | ---
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 |

##### Change column name

Example of a responsive table with replaced `column name`. To use, add `data-name="..."` to the table header column. This will overwrite the name of the column in the detail row. In this example `DOB` column name is overwritten to `Date Of Birth` in tablet and smartphone modes.

First Name | Last Name | Job Title | DOB | Status |
--- | --- | --- | --- | --- | ---
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 |