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.


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.


function renderer( api, rowIdx, columns )


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.


  • Value: function

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


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> '+
						'</tr>' :
				} ).join('');

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