JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/u/dt/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,af-2.1.2,b-1.2.1,b-colvis-1.2.1,b-html5-1.2.1,cr-1.3.2,fc-3.2.2,fh-3.1.2,kt-2.1.2,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/u/dt/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,af-2.1.2,b-1.2.1,b-colvis-1.2.1,b-html5-1.2.1,cr-1.3.2,fc-3.2.2,fh-3.1.2,kt-2.1.2,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="name-col filter-col">Name</th>
      <th class="pos-col filter-col">Position</th>
      <th class="office-col filter-col">Office</th>
      <th class="extn-col">Extn.</th>
      <th class="startDt-col">Start date</th>
      <th class="salary-col">Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

CSS

div.dataTables_wrapper {
  margin: 0 auto;
}

JavaScript

$(document).ready(function() {
   var table = $('#example').DataTable({
     "ajax": {
       "url": "https://api.myjson.com/bins/1ydeo",
       "dataSrc": "data",
       "columns": [{
           "data": "name"
         }, {
           "data": "position"
         }, {
           "data": "office"
         }, {
           "data": "extn"
         }, {
           "data": "start_date"
         }, {
           "data": "salary"
         }
       ]
     },
     colReorder: true,
     "bSort": true,
     select: true,
     "scrollY": '400px',
     "scrollX": true,
     "bPaginate": true,
     deferRender: true,
     scrollCollapse: true,
     scroller: true,
     initComplete: function() {
       var api = this.api();

       api.columns().every(function(i) {
         var column = api.column(i);
         console.log(column.header());
         var select = $('<select><option value=""></option></select>')
           .appendTo($(column.footer()).empty())
           .on('change', function() {
             var val = $.fn.dataTable.util.escapeRegex(
               $(this).val()
             );
						console.log(column.header());
             column
               .search(val ? '^' + val + '$' : '', true, false)
               .draw();
           });

         column.data().unique().sort().each(function(d, j) {
           select.append('<option value="' + d + '">' + d + '</option>')
         });
       });
     }
   });
   table.column(0).visible(false);
   table.column(3).visible(false);
 });