responsive.details.renderer

Define the renderer used to display the child rows.
Please note - this property requires the Responsive extension for DataTables.

Description

The information contained in the details rows that are displayed by Responsive are created through this function. By default it will create a ul / li list showing the data from cells that are hidden, or you can use one of the other built in renderers, or provide your own.

The rendering function is executed for details display in a table, and is run whenever the column visibility of the table changes.

Please note that as with all other configuration options for Responsive, this option is an extension to the default set of DataTables options. This property should be set in the DataTables initialisation object.

Since v2.1.0 Responsive has a number of built in rendering functions which can be accessed from the DataTable.Responsive.renderer object. The built in renderers are provided as functions that must be executed and will return the required renderer. This provides the ability to pass in options to the renderer.

The built in options are:

• listHidden - Show the data that has been hidden in an ul / li list.
  • No additional options
  • Default renderer
• listHiddenNodes - Same as listHidden but to moves the DOM nodes from the table cells into the list. This can be useful to preserve event handlers on cell contents if needed.
  • No additional options
• tableAll - Show the data for all columns (regardless of if they have been hidden or not) in a table.
  • Single option: tableClass - the class name to apply to the created table.

Additional renderers could be created and attached to this object if you wish to make them modular. If so, please feel free to share them with the community!

When creating the HTML for each item to be shown, it is a good idea to add data-dt-row and data-dt-column attributes based on the rowIndex and columnIndex information given. This allows these elements and their children to be passed into the DataTables API selector methods (cell() for example) and used as a regular part of the API.

Type

renderer( api, rowIdx, columns )

{
    className: ...,         // string - host column's class name (since Responsive 2.2.4)
    columnIndex: ...,       // integer - column data index (since Responsive 2.0.1)
    data: "...",            // string - cell's value
    hidden: true / false,   // boolean - true if hidden by Responsive - otherwise false
    rowIndex: ...,          // integer - column data index (since Responsive 2.0.2)
    title: "...",           // string - column title
}

        * `-type boolean` `false` - Do not display a child row
        * `-type string` - The information to be shown in the details display, including any required HTML.

Default

• Value: function

Function that will display the hidden information in a ul/li list.

Examples

new DataTable('#myTable', {
	responsive: {
		details: {
			renderer: DataTable.Responsive.renderer.tableAll()
		}
	}
});

new DataTable('#myTable', {
	responsive: {
		details: {
			renderer: DataTable.Responsive.renderer.tableAll({
				tableClass: 'ui table'
			})
		}
	}
});

new DataTable('#myTable', {
	responsive: {
		details: {
			renderer: function (api, rowIdx, columns) {
				var data = $.map(columns, function (col, i) {
					return col.hidden
						? '<tr data-dt-row="' +
								col.rowIndex +
								'" data-dt-column="' +
								col.columnIndex +
								'">' +
								'<td>' +
								col.title +
								':' +
								'</td> ' +
								'<td>' +
								col.data +
								'</td>' +
								'</tr>'
						: '';
				}).join('');

				return data ? $('<table/>').append(data) : false;
			}
		}
	}
});