JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input id="foo" type="checkbox" checked /> Foo
    <input id="bar" type="checkbox" checked /> Bar
</form>
<div id="tableDiv">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: filteredData">
            <tr>
                <td><span data-bind="html: id"></span></td>
                <td><span data-bind="html: status"></span></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var data = [
        {"id": 1, "status": "foo"},
        {"id": 2, "status": "bar"}, 
        {"id": 3, "status": "foo"},
        {"id": 4, "status": "foo"},
        {"id": 5, "status": "bar"}];

var viewModel = { 
    tableData: ko.observableArray(data),
    filter: ko.observable({'foo': ko.observable(true), 'bar': ko.observable(true)}),
    filteredData: ko.computed(function() {
        return ko.utils.arrayFilter(viewModel.tableData, function(item) {
            return viewModel.filter[item.Status];
        });
    })    
};

ko.applyBindings(viewModel, document.getElementById('tableDiv'));

$('input[type=checkbox]').click(function () {
    viewModel.filter[this.id] = this.checked;
});