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

In this example toggle button - plus/minus icon - is hidden using showToggle (or data-show-toggle data attribute) option set to false. In this case the entire row is a toggler, but there's no visual indication of collapsed/expanded list.

In the below example "Job title" column is always hidden using the all breakpoint. This is done so the details of the first row are always displayed regardless of the screen size so you can see the ID column is not visible. The first row is expanded by default using the expandFirst option to better illustrate how setting a columns visible option to false will hide it from both the normal and details rows.

In this example table doesn't have header. Simply make sure the first tr in your table contains only td cells and supply the column option attributes on them. If a header row is still being displayed you can explicitly set the showHeader option to false to ensure it is hidden.

Example of a responsive table with replaced column name. To use, add data-title="..." 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.

You can override default breakpoints for specific table content using data-breakpoints attribute. This is a simple object containing a key value structure of breakpoint names and there associated widths. Apart from the breakpoints supplied via this option there is also a built in one called all which will simply always hide a column and display it in the details row. To supply custom breakpoints through data attributes you must follow valid JSON syntax including quoted property names.