responsive.details.renderer
Define the renderer used to display the child rows
Responsive 1.0.0
renderer( api, rowIdx ) `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.` Two values can be returned: * `-type boolean` `false` - Do not display a child row * `-type string` - The information to be shown in the child row, 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/li` list showing the data from cells that are hidden, but you can provide a custom function that will create a child row containing whatever information you wish to display.

This function is executed for every child row 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/init). This property should be set in the DataTables initialisation object.

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

$('#example').DataTable( { responsive: { details: { renderer: function ( api, rowIdx ) { // Select hidden columns for the given row var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) { var header = $( api.column( cell.column ).header() );

return '<tr>'+ '<td>'+ header.text()+':'+ '</td> '+ '<td>'+ api.cell( cell ).data()+ '</td>'+ '</tr>'; } ).toArray().join('');

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