Sorting the table

In this task we can change the <th> elements so that they are clickable. When one of them is clicked, we can then sort the table rows by the column that was clicked.

Engage Thrusters

First of all we can update the <tr>and the <th> elements that it contains in sortable-table.html:

<tr data-bind="click: sort">
    <th data-bind="css: nameOrder">Name</th>
    <th data-bind="css: numberOrder">Atomic Number</th>
    <th data-bind="css: symbolOrder">Symbol</th>
    <th data-bind="css: weightOrder">Atomic Weight</th>
    <th data-bind="css: discoveredOrder">Discovered</th>
</tr>

Next we can add some new observable properties to our ViewModel in sortable-table.js:

nameOrder: ko.observable("ascending"),
numberOrder: ko.observable("ascending"),
symbolOrder: ko.observable("ascending"),
weightOrder: ko.observable("ascending"),
discoveredOrder: ko.observable("ascending"),

We also add a new method called...