<?xml version="1.0" encoding="UTF-8" ?>

<dt-option library="Responsive">

	<name>responsive.details.renderer</name>

	<summary>Define the renderer used to display the child rows</summary>

	<since>Responsive 1.0.0</since>



	<type type="function">

		<signature>renderer( api, rowIdx )</signature>

		<parameter type="DataTables.Api" name="api">

			DataTables API instance for the table in question

		</parameter>

		<parameter type="integer" name="rowIdx">

			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.

		</parameter>

		<returns type="boolean|string">

			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.

		</returns>

	</type>



	<default value="function">

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

	</default>



	<description>

		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/option). This property should be set in the DataTables initialisation object.

	</description>



	<example title="Custom renderer which displays the data that has been hidden in an HTML table"><![CDATA[



$('#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;

			}

		}

	}

} );



]]></example>



</dt-option>