JSFiddle - React, Tailwind, and code Playground

by Felipe Kautzmann

HTML

<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>

<!-- AngularJS Example Code: -->

<div ng:controller="Main">
 
<table>
  <tr>
    <th><a href ng:click="sortBy('name')">Name</a></th>
    <th><a href ng:click="sortBy('phone')">Phone Number</a></th>
    <th><a href ng:click="sortBy('age')">Age</a></th>
    <th><a href ng:click="sortBy('date')">Date</a></th>
  </tr>
  <tr ng:repeat="friend in friends.$orderBy(sort, reverse)">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
    <td>{{friend.date}}</td>
  </tr>
</table>
</div>

CSS

body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }

JavaScript

function Main() {
    this.friends = [{
        name: 'John',
        phone: '555-1212',
        age: 10,
        date: '11 June 2011'},
    {
        name: 'Mary',
        phone: '555-9876',
        age: 19,
        date: '12 June 2011'},
    {
        name: 'Mike',
        phone: '555-4321',
        age: 21,
        date: '13 July 2011'},
    {
        name: 'Adam',
        phone: '555-5678',
        age: 35,
        date: '14 May 2011'},
    {
        name: 'Julie',
        phone: '555-8765',
        age: 29,
        date: '15 June 2011'}];
}

Main.prototype = {

    sort: function(item) {
        if (this.predicate == 'date') {
            return new Date(item.date);
        }
        return item[this.predicate];
    },

    sortBy: function(field) {
        if (this.predicate != field) {
            this.predicate = field;
            this.reverse = false;
        } else {
            this.reverse = !this.reverse;
        }
    },

    reverse: false
};