JSFiddle - React, Tailwind, and code Playground

by Alex Carter

HTML

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.24/b-1.7.0/date-1.0.3/sp-1.2.2/sl-1.3.3/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.24/b-1.7.0/date-1.0.3/sp-1.2.2/sl-1.3.3/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>

<table class="table table-striped" id="test-table">
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex</td>
      <td>19</td>
    </tr>
    <tr>
      <td>John</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Fred</td>
      <td>54</td>
    </tr>
  </tbody>
</table>

JavaScript

$('#test-table').DataTable({
	dom: 'Brt',
  buttons: [
    {
      extend: 'searchPanes',
      text: 'Advanced Filters',
      config: {
        layout: 'columns-3'
      }
    }
  ],
  columnDefs:[{
    targets: [0,1],
    searchPanes: {
      show: true
    }
  }]
});