DataTable responsive display certain columns

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.

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).