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
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com