Details views

On narrow screens when Responsive removes columns from the display, the data in the hidden columns might still be useful and relevant to the end user. For this, Responsive has the ability to display the information from a row in a variety of ways including using DataTables' child row feature (row().child()) or a modal pop-up. This is also extensible and custom methods can be defined if required.

Display methods

The method by which a row's information can be displayed is controlled by the responsive.details.display option. This should be set to a function that will display the row's information (based on the rendered data - see below). Responsive's built in display options are available in the $.fn.dataTable.Responsive.display object - they are:

• childRow - Show hidden information in a child row, the visibility of which can be toggled by an end user.
• childRowImmediate - Immediately show information in a child row, without waiting for a user request
• modal() - Show information in a modal pop-up - please note that this is a function and should be executed when being assigned - this is to allow options to be passed into the modal library being used (see the responsive.details.display reference documentation for details). When Responsive is used with Bootstrap, Foundation or jQuery UI it will automatically use their native modal dialogue libraries.

For example, you could use the child row with immediate show control using the following initialisation:

$('#myTable').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate
        }
    }
} );

The childRow display method is the default option that Responsive will use. It uses a child row to display the data hidden by Responsive. To keep the screen uncluttered, by default the child row is not visible but the end user can select to view the data if they so wish.

For information on how to create a custom renderer, please see the responsive.details.display reference documentation. If you create one, let us know!

Rendering options

Responsive has a built in renderer that will display the data for the hidden columns in the details rows for the table. This is an ul/li list that contains the title of the column for the data and the data itself. The renderer is re-executed every time the column visibility changes (a desktop browser resize for example), ensuring that the full data for the table is retained.

A custom renderer can be defined using the responsive.details.renderer option if you wish to control the layout yourself, or potentially add additional information into the details row.

The display methods discussed above will utilise the data that is returned by the renderer, allowing the rendered information to be entirely independent of how it is displayed (i.e. it will work for both child rows and modals).

User interaction controls

Responsive has three options for how to display the controls allowing the end user to access the details row which are set through the responsive.details.type option:

• Disabled (false) - no ability to show the details row
• Inline (inline - default) - the control will be shown in the first column of the table if there are hidden columns
• Column based (column) - the control will be shown in the designated column, with that column being used only for the purpose of showing the details row access control.

The inline type is useful for cases when you wish to add Responsive to an existing table without changing its structure. The column type is useful for cases when you don't wish to have the layout of the first column altered by the control icon being shown in the first column, as it is for inline.