DataTable responsive display certain columns

Question

I am using DataTables along with responsive and facing issues while trying to display only certain columns.

Table layout is like this:

I need to display to only 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10' and hide others( these should be displayed by expand control at the end of each row ).

JS:

  $( 'table' ).DataTable( {
      order: [ [ 0, "asc" ] ],
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets: -1
        } ]
    } );

This is the JSFiddle. Any suggestions!

Answer 1

To show specific columns in responsive datatable, you just need to add Class Controls in th of table, as follow:

<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th class="all">Column 1</th>
      <th class="none">Column 2</th>
      <th class="all">Column 3</th>
      <th class="none">Column 4</th>
      <th class="none">Column 5</th>
      <th class="none">Column 6</th>
      <th class="all">Column 7</th>
      <th class="all">Column 8</th>
      <th class="none">Column 9</th>
      <th class="all">Column 10</th>
      <th class="none">Column 11</th>
      <th class="all"></th>
    </tr>
  </thead>

class "all": Always display column irrespective of the screen size.

class "none": Don't display as a column, but show in the child row.

Source

---

Here is its working demo.

Answer 2

It looks like you need this:

The column priority can also be defined by a data-priority attribute on the column's header cell (for example First name).