Responsive example Column controlled child rows

Responsive has two built in methods for displaying the controlling element of the child rows; inline which is the default option and shows the control in the first column, and column which set a control column as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show / hide control for the rows.

This example shows the responsive.details.typeR option set to column to activate the control column. Note that by default the first column is used as the control, so additionally in the initialisation the orderDT and columns.orderableDT options are used to disable sorting on this column.

First nameLast namePositionOfficeAgeStart dateSalaryExtn.
First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
Showing 1 to 10 of 57 entries

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
$(document).ready(function() {
    $('#example').DataTable( {
        responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        } ],
        order: [ 1, 'asc' ]
    } );
} );

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