Responsive
In the modern world of responsive web design tables can often cause a particular problem for designers due to their row based layout. Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
Download
The easiest way to get and use Responsive is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.
Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.
Initialisation
Responsive can be used on the DataTables in a number of different ways. The simplest of these options is just to add the responsive option to your DataTables options with a boolean value (it is also possible to use an object for fine grained control - see the reference documentation for full details):
new DataTable('#myTable', {
responsive: true
});
HTML requirements
To have Responsive operate as expected, you will need to set a meta element in your document's head instructing the browser to render the page based on the size available without scaling it down.
<meta name="viewport" content="width=device-width" />
This is common in sites that are designed to work with mobiles, so you might already have such a tag, particularly if you are using a styling framework such as Bootstrap or Bulma. For more details of the viewport meta tag, please see the MDN documentation.
Features
Key features include:
- Extend your responsive design to HTML tables
- Full control over column visibility at breakpoints, or automatic visibility
- Collapsed information from the table shown in a child row
- Seamlessly integrates with DataTables
- Works with Bootstrap, Foundation and other responsive CSS frameworks