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.

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.

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".

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.

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.

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.