JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="term" id="term" autocomplete = "off" />
<table id="dataTable">
<thead>
    <tr>
        <th>Example No.</th>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th colspan="3"></th>
    </tr>
</tfoot>
<tbody>
<tbody>    
    <tr>
        <td>345678917</td>
        <td>Test 1</td>
        <td>one_test1@gmail.com</td>
    </tr>
    <tr>
        <td>3512376894</td>
        <td>Test 2</td>
        <td>two.test2@hotmail.com</td>
    </tr>
</tbody>
</table>

CSS

table thead {
    display: table-row-group;
}

table tbody {
    display: table-row-group;
}

table tbody tr {
    display: none;
}

JavaScript

// JavaScript
  document.getElementById('term').onkeyup = function(){
    var term = this.value;    
    var column = 0;
    var msg = 'No results found!';
    var pattern = new RegExp(term, 'g');  
    var table = document.getElementById('dataTable');
    var tr = table.getElementsByTagName('TR');
      
    for(var i = 0; i < tr.length; i++){
      var td = tr[i].getElementsByTagName('TD');
      for(var j = 0; j < td.length; j++){
        if(j == column && td[j].innerHTML == term){
          tr[i].style.display = 'table-row';
          table.tFoot.innerHTML = '';  
          return;
        }else{
          tr[i].style.display = 'none';
          table.tFoot.innerHTML = msg;
        }
      }    
    }
      
  };