Initialisation

Responsive for DataTables can be enabled in three different ways:

• By adding the class responsive to the HTML table
• Using the responsive DataTable option
• Use the $.fn.dataTable.Responsive constructor

Class

To enable Responsive on a DataTable through a class name, add either:

• responsive, or
• dt-responsive

to the HTML table's class list. For example:

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

Responsive will automatically detect a DataTable being created on the page with either of the classes assigned to the table. If the classes are present, Responsive will initialise itself with the default configuration options.

Two class names are provided as options for this automatic initialisation, as the class responsive is relatively common and might already have some defined meaning in your CSS, or the framework if one is being used. For example, in Bootstrap the responsive class is used to perform scrolling of a table (also available in DataTables using the scrollX option).

Note that in the example above, the DataTables nowrap class has also been added to the table. This can be particularly useful for responsive layouts as it disables the wrapping of text content in a table, keeping the text all on one line. Without this class (or use of the white-space CSS option in your own CSS for the table) the browser would attempt to collapse the text in the table onto multiple lines to reduce horizontal space. The result is that the browser window needs to be much smaller before Responsive can remove columns.

Please see the DataTables stylesheet options for further information on the options available.

Option

Responsive can also be enabled for a DataTable using the responsive option. As well as being easy to use in your Javascript, this option also provides the ability to customise the configuration options for Responsive.

In its simplest form, the responsive option can be given as a boolean value to indicate if Responsive should be enabled or not for that table:

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

It can also be given as an object, with the properties defining the configuration options to use for the instance. When given as an option Responsive is assumed to be enabled for the table (use false if you need to disable it). The full list of options available are documented in the Responsive reference.

In the following example we use responsive as an object in combination with the responsive.details option to disable the default behaviour of showing the collapsed details in a child row:

$('#example').DataTable( {
    responsive: {
        details: false
    }
} );

Constructor

The final method of initialising Responsive for a DataTable is to directly initialise the instance yourself using the $.fn.dataTable.Responsive constructor. This can be useful if you need to add Responsive after a DataTable has been initialised, and you have no ability to add the responsive class before that point.

The constructor takes two parameters:

1. The DataTable to add Responsive to. This can be a DataTables API instance, a jQuery selector for the table, or a jQuery object containing the table as the sole node in its result set.
2. Optionally - configuration parameter. These are the same options as for responsive. If not given the default configuration options will be used.

In the following example we initialise a DataTable and then add Responsive to it, through use of the constructor method. Please note that you must include the keyword new for the constructor as a new instance must be made for each table.

var table = $('#example').DataTable();

new $.fn.dataTable.Responsive( table, {
    details: false
} );