Usage

Initialisation and configuration of Responsive is performed through the responsive initialisation option for DataTables. This option can be given as a simple boolean value to enable Responsive with its default values, or as an object to provide more granular control.

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.

Text wrapping

When using Responsive, you may also wish to have the text in each cell restricted to display on a single line (i.e. no wrapping). To do this add the nowrap class to your table, it is a class that is available in the default stylesheet for DataTables and all styling integrations it provides.

If text wrapping is allowed, that will be performed first by the browser, before DataTables starts to remove columns to fit into the area available, and can result in your columns looking squashed. As with all things DataTables, it is customisable to suit your needs!

Simple initialisation

In its most simple case, you can enable Responsive by simply setting responsive: true as an option in the DataTables initialisation:

new DataTable('#myTable', {
    responsive: true
});

This will cause your table to collapse to fit the available area by hiding columns (by default, from the end of the table, although this is customisable). When columns are hidden, a control will be displayed on the first column (again customisable) that will let the end user show a "details view" with the details that were hidden.

Class name initialisation

In addition to the responsive option, it is also possible to have Responsive initialise with the default options on a table by simply adding one of the following two classes to the table:

• responsive, or
• dt-responsive

For example:

<table class="display responsive nowrap">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
    ...
</table>

Options

For more complex cases, the responsive option can be used as an object allowing you to specify column priority, display methods for the hidden information and more. In the following example, Responsive is configured to have its details show / hide control on the first column in the table, as a dedicated column (i.e. it is only shown if information is hidden). This also requires that the class dtr-control is applied to the first column, which is done here with columns.className, to have the relevant styling shown.

new DataTable('#example', {
    columnDefs: [
        {
            className: 'dtr-control',
            orderable: false,
            targets: 0
        }
    ],
    order: [1, 'asc'],
    responsive: {
        details: {
            type: 'column'
        }
    }
});

Reference

For a complete list of the options that Responsive supports, please refer to the DataTables initialisation options reference. The Responsive examples also demonstrate the options available.