JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<h1>Filtered By Id &gt; 5</h1>

<div data-bind="template: {name: 'employees-template', data: employees}">
</div>

<h1>Active Employees</h1>

<div data-bind="template: {name: 'employees-template', data: activeEmployees}">
</div>

<h1>Inactive Employees</h1>

<div data-bind="template: {name: 'employees-template', data: inactiveEmployees}">
</div>

<script type="text/html" id="employees-template">
   <table class='table'>
       <thead>
           <tr>
               <th>Id</th>
               <th>Name</th>
               <th>Action</th>
           </tr>
       </thead>
       <tbody data-bind="template: {name: 'emp-template', foreach: $data}">
       </tbody>
   </table>    
</script>

<script type="text/html" id="emp-template">
    <tr>
    <td data-bind="text:id"></td>
    <td data-bind="text:name"></td>
    <td>
        <button type="button" class="btn btn-success" data-bind="click:$root.activate, visible:!isActive()">Activate</button>
        <button type="button" class="btn btn-danger" data-bind="click:$root.deactivate,visible:isActive">Deactivate</button>
    </td>
    </tr>
</script>

CSS

.strikethrough {
    text-decoration: line-through;
}

JavaScript

(function () {

    var employee = function (name, id) {
        var $this = this;

        $this.name = ko.observable(name || 'no name');
        $this.isActive = ko.observable(true);
        $this.id = ko.observable(id || 0);
    };

    var model = function () {
        var $this = this,
            employees = ko.observableArray([
            new employee('Josh', 6),
            new employee('Dan', 1),
            new employee('Cathy', 2),
            new employee('Bob', 8),
            new employee('Joe', 4),
            new employee('Derrick', 10)]);

        $this.employees = ko.computed(function () {
            return ko.utils.arrayFilter(employees(), function (emp) {
                return emp.id() > 5;
            });
        });

        $this.inactiveEmployees = ko.computed(function () {
            return ko.utils.arrayFilter(employees(), function (emp) {
                return !emp.isActive();
            });
        });

        $this.activeEmployees = ko.computed(function () {
            return ko.utils.arrayFilter(employees(), function (emp) {
                return emp.isActive();
            });
        });

        $this.activate = function (emp) {
            emp.isActive(true);
        };

        $this.deactivate = function (emp) {
            //emp.isActive(false);
            ko.utils.arrayForEach(employees(), function(empl){
            debugger;
            	empl.isActive(true);
            });
        };
    };

    ko.applyBindings(new model());

}());