responsive.details.renderer

Since: Responsive Responsive 1.0.0

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 $.fn.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
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

function renderer( api, rowIdx, columns )

Parameters:

	Name	Type	Optional
1	`api`	`DataTables.Api`	No
	DataTables API instance for the table in question
2	`rowIdx`	`integer`	No
	Row index for the row that the renderer is being asked to render. Use the `row()` and / or `cells()` methods to get information from the API about the row so the information can be rendered.
3	`columns`	`array`	No
	Since 2.0.0: An array of objects containing information about each column in the DataTable. The array length is exactly equal to the number of columns in the DataTable, with each column represented by a DataTable in index order. Additionally, the structure of each object in the array is: `{ 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 }`

Returns:

boolean, string

Two values can be returned:

boolean false - Do not display a child row
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

Use the tableAll renderer without specifying a class name:

$('#example').DataTable( {
	responsive: {
		details: {
			renderer: $.fn.dataTable.Responsive.renderer.tableAll()
		}
	}
} );

Use the tableAll renderer and specify a class name:

$('#example').DataTable( {
	responsive: {
		details: {
			renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
				tableClass: 'ui table'
			} )
		}
	}
} );

Custom renderer which displays the data that has been hidden in an HTML table:

$('#example').DataTable( {
	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;
			}
		}
	}
} );