JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script type="text/javascript" ng:autobind
src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>

<table ng:controller="SortableTableCtrl">
    <thead>
        <tr>
            <th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng:repeat="row in body.$orderBy(sort.column, sort.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 */

.sort-true {
     background:no-repeat left center...

JavaScript

function SortableTableCtrl() {
    var scope = this;

    // data
    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.sort = {
        column: 'b',
        descending: false
    };

    scope.selectedCls = function(column) {
        return column == scope.sort.column && 'sort-' + scope.sort.descending;
    };
    
    scope.changeSorting = function(column) {
        var sort = scope.sort;
        if (sort.column == column) {
            sort.descending = !sort.descending;
        } else {
            sort.column = column;
            sort.descending = false;
        }
    };
}