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" 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() {
        // missing () after viewModel.tableData
        return ko.utils.arrayFilter(viewModel.tableData(), function(item) {
            //missing () after filter and at the end
            //typo: Satus should be status
            return viewModel.filter()[item.status]();
        });
        //deferEvaluation was needed to refernce viewModel inside the computed
    }, null, {deferEvaluation: true}) 
};

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

$('input[type=checkbox]').click(function () {
    //missing () after filter missing () to set the observable value
    viewModel.filter()[this.id](this.checked);
});