Details rows

On narrow screens, when Responsive removes a columns from the display, the data in that column doesn't just disappear, it might still be useful and relevant to the end user. For this, Responsive makes use of DataTables child row feature to display the data from the hidden column in a child row - the visibility of which can be controlled by the end user. By default the child row is not visible to keep the screen uncluttered, but the end user can select to view the data if they so wish. In Responsive we term the child row that contains this information a details row.

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.

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.