JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script type="text/javascript" ng:autobind
src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>
<script>
    function SortableTableCtrl() {
    var scope = this;
    scope.selectedColumn = 'b';
    scope.descending = false;
    scope.head = {
        a: "Name",
        b: "Surname",
        c: "City"
    };
    scope.body = [
        {
        a: "Hans",
        b: "Mueller",
        c: "Leipzig"},
    {
        a: "Dieter",
        b: "Zumpe",
        c: "Berlin"},
    {
        a: "Bernd",
        b: "Danau",
        c: "Muenchen"}
    ];
    scope.chgOrder = function(i) {
        scope.selectedColumn = i;
        scope.descending = !scope.descending;
    };
    scope.selectColumn = function(i) {
        if (scope.selectedColumn === i) {
            if (scope.descending) {
                return "selectedColumnDesc";
            } else {
                return "selectedColumnAsc";
            }
        }
        return '';
    }
}

angular.directive("ui:sort", function(column, element) {
    var scope = this;
    return function(element) {
        var self = this;
        element.bind('click', function(event) {
            self.$parent.selectedColumn = column;
            element.addClass('asc');
            alert(column);
            event.stopPropagation();
        });
    };
});
</script>
{{selectedColumn}}
<table ng:controller="SortableTableCtrl">
    <thead>
        <tr>
            <th ng:repeat="(i,th) in head" ui:sort="{{i}}">{{th}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng:repeat="row in body.$orderBy(selectedColumn,descending)">
            <td>{{row.a}}</td>
            <td>{{row.b}}</td>
            <td>{{row.c}}</td> 
        </tr>
    </tbody>
</table>

CSS

td { padding: 0.2em 1em; }
th { text-align: center; }
thead {
    border-bottom: 2px solid black; 
    cursor: pointer;  
}

/* http://www.greywyvern.com/code/php/binary2base64 */

th.desc:after {
     content:...