Filtering

by Jaganathan

HTML

<div data-bind="foreach: filters">
<input type="button" data-bind="click: $parent.setActiveFilter, value: title"/>
</div>

<br/>

<table>
<thead>
    <tr data-bind="foreach: headers">
        <th data-bind="click: $parent.sort, text: title"></th>
    </tr>
</thead>
    <tbody data-bind="foreach: filteredPeople">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
            <td data-bind="text: age"></td>
        </tr>
    </tbody>
</table>

CSS

th
{
    cursor:pointer;
}

JavaScript

var viewModel = function(){
    var self = this;
    self.people = ko.observableArray([
        {firstName:'Jagan',lastName:'B',age:38},
        {firstName:'Ammu',lastName:'D',age:36},
        {firstName:'Jagan',lastName:'M',age:10},
        {firstName:'Megan',lastName:'S',age:7},
        {firstName:'Mani',lastName:'J',age:40},
        {firstName:'Ammu',lastName:'K',age:36},
        {firstName:'Jagan',lastName:'D',age:10}
    ]);
    
    self.headers = [
        {title:'First Name',sortPropertyName:'firstName', asc: true},
        {title:'Last Name',sortPropertyName:'lastName', asc: true},
        {title:'Age',sortPropertyName:'age', asc: true}
    ];
    self.filters = [
        {title:'Show All', filter: null},
        {title:'Only Jagan', filter: function(item){return item.firstName == 'Jagan';}},
        {title:'Only Ammu', filter: function(item){return item.firstName == 'Ammu';}},
        {title:'Only Mani', filter: function(item){return item.firstName === 'Mani'; }}
    ];
    
    self.activeSort = self.headers[0]; //set the default sort
    self.sort = function(header, event){
        //if this header was just clicked a second time
        if(self.activeSort === header) {
            header.asc = !header.asc; //toggle the direction of the sort
        } else {
            self.activeSort = header; //first click, remember it
        }
        var prop = self.activeSort.sortPropertyName;
        var ascSort = function(a,b){ return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
        var descSort = function(a,b){ return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
        var sortFunc = self.activeSort.asc ? ascSort : descSort;
        self.people.sort(sortFunc);
    };
    
    self.activeFilter = ko.observable(self.filters[0].filter);
    self.filteredPeople = ko.computed(function(){
        if(self.activeFilter()){
            return ko.utils.arrayFilter(self.people(),...