DataTables change expander column

Question

In this example (datatables.net) you can see the first column of the DataTables being clickable and expanding.

Is it posible to change the "control column" to the second column? Or even better allowing the whole row being clickable. I have found the control class in the responsive documentation (datatables.net) but this doesn't seem to work (jsfiddle).

<table>
<thead>
  <tr>
    <td>First</td>
    <td class="control">Second</td>
    <td class="none">Third</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
  </tr>
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
  </tr>
</tbody>
</table>

$('table').DataTable({responsive: {  details: true}});

control - This is a special class which is used by the column option for the responsive.details.type option to designate which column is the control column in the table. This allows the Responsive stylesheet to add the required styling information for the column.

If you klick on the first column where the data is located it will expand. I would like to make the second column clickable or the whole row. — toweb - Noel Schenk, Feb 20 '18 at 10:32
What makes the first column clickable? I don't see it in your code. — J K, Feb 20 '18 at 10:34
I dont know it's the DataTable plugin which provides this functionality. I would like to change exactly this part. — toweb - Noel Schenk, Feb 20 '18 at 10:35
Have a look at [target option for responsive extension](https://datatables.net/reference/option/responsive.details.target) — mmushtaq, Feb 20 '18 at 12:27

score 0 · Answer 1 · edited Feb 21 '18 at 07:28

0

Just add

details: {
    type: 'column',
    target: 'tr'
}

With this the whole row will be clickable. Also you can set the position of the (+) with the following code:

columnDefs: [ {
    className: 'control',
    orderable: false,
    targets: 2 //Position indicator zero based
} ]

Check out this example: https://jsfiddle.net/csnk79nx/26/

Found from here: DataTable responsive display certain columns

More Information can be found here (datatables.net).

edited Feb 21 '18 at 07:28

mmushtaq

3,430
7
30
47

answered Feb 20 '18 at 12:33

toweb - Noel Schenk

43
10

1

Setting `tr` as `target` will make the whole `row` clickable as mentioned [here](https://datatables.net/reference/option/responsive.details.target). So statement *With this the whole column will be clickable* needs to be replaced with ***With this the whole row will be clickable*** – mmushtaq Feb 21 '18 at 04:55

DataTables change expander column

1 Answers1