Angular:

http://angularjs.org/

by mrajcok

HTML

<div ng-controller="MyCtrl">
    <table>
        <th data-header-sort="FirstName" data-caption="First name"></th>
        <th data-header-sort="Age" data-caption="Age"></th>
        <tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse">
            <tr><td>{{customer.FirstName}}<td>{{customer.Age}}
        </tbody>
    </table>
</div>

JavaScript

var app = angular.module('myApp',[]);

app.directive('headerSort', function () {
    return {
        scope: true,
        link: function (scope, element, attrs) {
            scope.caption  = attrs.caption;
            scope.sortType = attrs.headerSort;
            scope.reverse  = false;
        },
        template: '<div data-ng-click="reverse=!reverse; doSort(sortType, reverse);">' +
             '{{caption}}</div>'
    };
});
function MyCtrl($scope) {
    $scope.orderField = "FirstName";
    $scope.reverse    = false;
    $scope.customers  = [ {FirstName: 'Martijn', Age: 22}, {FirstName: 'Mark', Age: 44}];
    $scope.doSort = function (sortType, reverse) {
        console.log('sorting',sortType, reverse);
        $scope.orderField = sortType;
        $scope.reverse    = reverse;
    };
}