Example of a basic responsivetable. Create responsive tables by wrapping any .tablein .table-responsiveto 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 togglablecolumns 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-hideattributes 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-groupto the table header cells that you want to group and add .footable-group-rowto the group row.

Example of a responsive table with hiddencolumns 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 Statuscolumn 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 DOBcolumn name is overwritten to Date Of Birthin tablet and smartphone modes.