JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" autocomplete = "off" />
<table id="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Manufacturer</th>
            <th>Price</th>
            <th>InStock</th>
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>MacBook Air</td>
            <td>Apple</td>
            <td>$456</td>
            <td>85</td>            
        </tr>
        <tr>
            <td>Arc GIS</td>
            <td>ESRI</td>
            <td>$4556</td>
            <td>15</td>                        
        </tr>
        <tr>
            <td>3ds MAX</td>
            <td>Aurodesk</td>
            <td>$6556</td>
            <td>359</td>                        
        </tr>
        <tr>
            <td>Windows 7</td>
            <td>Micorsoft</td>
            <td>$256</td>
            <td>2567</td>                        
        </tr>        
    </tbody>
</table>
<div id="message"></div>

CSS

table thead {
    display: table-row-group;
}
table tbody tr {
    display: none;
}

JavaScript

document.getElementById('search').onkeyup = function(){
    var table = document.getElementById('table'),
        tr = table.rows, td,
        term = this.value.toLowerCase(), column = 0, i, j,
        message = document.getElementById('message');
    
    for(i = 1; i < tr.length; i++){
        td = tr[i].cells;
        for(j = 0; j < td.length; j++){
            if(j == column && td[j].innerHTML.toLowerCase() == term){
                tr[i].style.display = 'table-row';
                message.innerHTML = '';
                return;
            }else{
                tr[i].style.display = 'none';
                message.innerHTML = 'No results found!';
            }
        }
    }
};