<?xml version="1.0" encoding="UTF-8" ?> <dt-example table-type="html-details" table-class="display nowrap" order="4"> <css lib="datatables responsive" /> <js lib="jquery datatables responsive"> <![CDATA[ $(document).ready(function() { $('#example').DataTable( { responsive: { details: { type: 'column', target: 'tr' } }, columnDefs: [ { className: 'control', orderable: false, targets: 0 } ], order: [ 1, 'asc' ] } ); } ); ]]> </js> <title lib="Responsive">Whole row child row control</title> <info><![CDATA[ When using the `column` details type in Responsive the `r-init responsive.details.target` option provides the ability to control what element is used to show / hide the child rows when the table is collapsed. This example uses the `tr` selector to have the whole row act as the control. ]]></info> </dt-example>