Responsive example Custom child row renderer

The child row's for a collapsed table in Responsive, by default, show a ul/li list of the data from the hidden columns. The responsive.details.rendererR option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use.

This example shows the cells()DT method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc.

The Javascript shown below is used to initialise the table shown in this example:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function() {
    $('#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;
                }
            }
        }
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2014
DataTables is licensed under the MIT license.