JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="table">
    <tr>
        <td>Apple</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Grapes</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td>Orange</td>
    </tr>
</table>

CSS

body {
    padding: 20px;
}
input {
    margin-bottom: 5px;
    padding: 2px 3px;
    width: 209px;
}
td {
    padding: 4px;
    border: 1px #CCC solid;
    width: 100px;
}

JavaScript

$('#search').on('keyup', function () {

    var $rows = $('#table tr');
    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();
});