Sortable Table

HTML

<script src="https://cdnjs.com/libraries/moment.js/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<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: moment(date).format('DD/MM/YYYY')"></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());