JSFiddle - React, Tailwind, and code Playground

by Djalma Manfrin

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
    <tr id="tr-search">
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="row">
      <td class="name">Tiger Nixon</td>
      <td class="position">System Architect</td>
      <td class="office">Edinburgh</td>
    </tr>
    <tr class="row">
      <td class="name">Garrett Winters</td>
      <td class="position">Accountant</td>
      <td class="office">Tokyo</td>
    </tr>
    <tr class="row">
      <td class="name">Ashton Cox</td>
      <td class="position">Junior Technical Author</td>
      <td class="office">San Francisco</td>
    </tr>
    <tr class="row">
      <td class="name">Cedric Kelly</td>
      <td class="position">Senior Javascript Developer</td>
      <td class="office">Edinburgh</td>
    </tr>
  </tbody>
</table>

CSS

.remove {
  display:none;
}

JavaScript

$('#example thead th').each( function () {
  var title = $(this).text();
  $('#tr-search').append( '<td><input type="text" class="inputs-search" name="'+title.toLowerCase()+'" placeholder="Looking for '+title.toLowerCase()+'"/></td>');
});

$('.inputs-search').on('keyup', function(){
    var search = $(this).val();
    var column = $(this).attr("name");
  var target = '.row .' + column;
  var match = new RegExp(search, "i"); 

  $(target).each(function(){
        if (!match.test($(this).text())) {
        $(this).closest('tr').addClass('remove');
      } else {
        $(this).closest('tr').removeClass('remove');
      }
  });
});