JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<form>
    <input id="foo" type="checkbox" value="foo" data-bind="checked: filter" /> Foo
    <input id="bar" type="checkbox" value="bar" data-bind="checked: filter" /> 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.observableArray(["foo","bar"]),
    filteredData: ko.computed(function() {
        return ko.utils.arrayFilter(viewModel.tableData(), function(item) {            
            return ko.utils.arrayFirst(viewModel.filter(), function (filter) {
                return filter == item.status;
            });
        });
        //deferEvaluation was needed to refernce viewModel inside the computed
    }, null, {deferEvaluation: true}) 
};

ko.applyBindings(viewModel);