responsive.details.renderer
Define the renderer used to display the child rows
Responsive 1.0.0
renderer( api, rowIdx, columns )
DataTables API instance for the table in question
Row index for the row that the renderer is being asked to render. Use the `dt-api row()` and / or `dt-api cells()` methods to get information from the API about the row so the information can be rendered.
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:
```js
{
title: "...", // string - column title
data: "...", // string - cell's value
hidden: true / false // boolean - true if hidden by Responsive - otherwise false
columnIndex: ... // integer - column data index (since Responsive 2.0.1)
rowIndex: ... // integer - column data index (since Responsive 2.0.2)
}
```
Two values can be returned:
* `-type boolean` `false` - Do not display a child row
* `-type string` - The information to be shown in the details display, including any required HTML.
Function that will display the hidden information in a `-tag ul/li` list.
The information contained in the details rows that are displayed by Responsive are created through this function. By default it will create a `-tag ul` / `-tag 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](/reference/option). 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 `-tag ul` / `-tag 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 `-tag 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](/forums) with the community!
When creating the HTML for each item to be shown, it is a good idea to add `-string data-dt-row` and `-string 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 (`dt-api cell()` for example) and used as a regular part of the API.
'+
'| '+col.title+':'+' | '+
''+col.data+' | '+
'' :
'';
} ).join('');
return data ?
$('').append( data ) :
false;
}
}
}
} );
]]>