Sortable Table

HTML

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

CSS

th
{
    cursor:pointer;
}

JavaScript

var initialData = [
  {firstName:'James',lastName:'Smith',date:"/Date(1447110000000)/"},
        {firstName:'Susan',lastName:'Smith',date:"/Date(1447110000000)/"},
        {firstName:'Jeremy',lastName:'Smith',date:"/Date(1447110000000)/"},
        {firstName:'Megan',lastName:'Smith',date:"/Date(1447110000000)/"},
        {firstName:'James',lastName:'Jones',date:"/Date(1447110000000)/"},
        {firstName:'Martha',lastName:'Jones',date:"/Date(1447110000000)/"},
        {firstName:'Peggy',lastName:'Jones',date:"/Date(1447110000000)/"}
];

var viewModel = function(){
    var self = this;
    window.viewModel = self;

    self.people = ko.observableArray(initialData);

    self.headers = [
        {title:'First Name',sortPropertyName:'firstName', asc: true},
        {title:'Last Name',sortPropertyName:'lastName', asc: true},
        {title:'Date',sortPropertyName:'date', asc: true}
    ];
}

ko.applyBindings(new viewModel());