JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<form class='filter-form'>
  <h3>Filters</h3>
  <div>
    <label>Name :</label>
    <input thindex = 0  type='text' value='' class='filter'>
  </div>
   <div>
    <label>Last name :</label>
    <input thindex = 1  type='text' value='' class='filter'>
  </div>
   <div>
    <label>Position :</label>
    <input thindex = 2  type='text' value='' class='filter'>
  </div>
   <div>
    <label>Office :</label>
    <input thindex = 3 type='text' value='' class='filter'>
  </div>
   <div>
    <label>Age :</label>
    <input thindex = 4  type='text' value='' class='filter'>
  </div>
  <div>
     <label>Startdate :</label>
    <input thindex = 5  type='text' value='' class='filter' >
    
    
  </div>
   <div>
     <label>Salary :</label>
    <input thindex = 6 type='text' value='' class='filter' >
    
    
  </div>
  
</form>
<table id="example" class="stripe row-border order-column" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
               ...

CSS

.filter-form {
  margin-bottom: 30px;
}

.filter-form div {
  margin-bottom: 10px;
}

JavaScript

var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        "fixedColumns": true,
       
    } );
    
    $('.filter').on('keyup change', function() {
  //clear global search values
  //table.search('');
  table.column($(this).data('thindex')).search(this.value).draw();
});


/*$(".dataTables_filter input").on('keyup change', function() {
  //clear column search values
  table.columns().search('');
  //clear input values
  $('.filter').val('');

} );
*/