Sortable Table

by kougiland

HTML

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

JavaScript

var viewModel = function(){
    var self = this;
    self.people = ko.observableArray([
        {firstName:'James',lastName:'Smith',age:38},
        {firstName:'Susan',lastName:'Smith',age:36},
        {firstName:'Jeremy',lastName:'Smith',age:10},
        {firstName:'Megan',lastName:'Smith',age:7},
        {firstName:'James',lastName:'Jones',age:40},
        {firstName:'Martha',lastName:'Jones',age:36},
        {firstName:'Peggy',lastName:'Jones',age:10}
    ]);
    self.headers = [
        {title:'First Name',sortKey:'fName'},
        {title:'Last Name',sortKey:'lName'},
        {title:'Age',sortKey:'age'}
    ];
self.sort = function(header, event){
    var sortKey = header.sortKey;
    switch(sortKey){
        case 'fName':
            self.people.sort(function(a,b){
                return a.firstName < b.firstName ? -1 : a.firstName > b.firstName ? 1 : a.firstName == b.firstName ? 0 : 0;
            });
            break;
        case 'lName':
            self.people.sort(function(a,b){
                return a.lastName < b.lastName ? -1 : a.lastName > b.lastName ? 1 : a.lastName == b.lastName ? 0 : 0;
            });
            break;
        case 'age':
            self.people.sort(function(a,b){
                return a.age < b.age ? -1 : a.age > b.age ? 1 : a.age == b.age ? 0 : 0;
            });
            break;
    }
};
}

ko.applyBindings(new viewModel());