JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<table class="display" id="mytable" style="width: 100%;">
  <thead id="myhead">
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>
        <input type="search" class="form-control col-xs-1" placeholder="search name" />
      </th>
      <th>
        <input type="search" class="form-control col-xs-1" placeholder="search dept" />
      </th>
      <th>
        <input type="search" class="form-control col-xs-1" placeholder="search phone" />
      </th>
    </tr>
  </tfoot>
  <tbody></tbody>
</table>

JavaScript

var result = [{
  'name': 'John',
  'department': 'IT',
  'phone': '333-3333'
}, {
  'name': 'Mary',
  'department': 'HR',
  'phone': '333-4768'
}]
var oTable;
$(document).ready(function() {

      oTable = $('#mytable').DataTable({
          data: result,
          columns: [{
            data: 'name'
          }, {
            data: 'department'
          }, {
            data: 'phone'
          }],
          
          initComplete: function () {
                        var r = $('#mytable tfoot tr');
                        r.find('th').each(function () {
                            $(this).css('padding', 8);
                        });
                        $('#mytable thead').append(r);
                        $('#search_0').css('text-align', 'center');
                    }

        });
               oTable.columns().every(function () {
                   var that = this;

                   $('input', this.footer()).on('keyup change', function () {
                       if (that.search() !== this.value) {
                           that
                               .search(this.value)
                               .draw();
                       }
                   });
               });
      });