JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="tableAll">
  <tr>
     <th>Fruit name</th>
     <th>Color</th>
     <th>Notes</th>
  </tr>
   <tr>
      <td>Apple</td>
      <td>Green</td>
      <td>Delicious</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

CSS

td{border: 1px solid black}

JavaScript

var $rows = $('#tableAll tr');
    $('#search').keyup(function() {
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

      $rows.show().filter(function() {
          var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
          return !~text.indexOf(val);
      }).hide();
    });