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):

$('#myTable').DataTable( {
    responsive: true
} );

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