JSFiddle - React, Tailwind, and code Playground

by Randall Madison

HTML

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

<!-- AngularJS Example Code: -->

<div ng:init="friends = 
[{name:'John', phone:'555-1212', age:10, date:'9/2/2013 10:31:02 AM'},
 {name:'Mary', phone:'555-9876', age:19, date:'8/2/2013 11:31:00 AM'},
 {name:'Mike', phone:'555-4321', age:21, date:'10/12/2013 2:41:07 AM'},
 {name:'Adam', phone:'555-5678', age:35, date:'8/2/2013 10:31:45 AM'},
 {name:'Julie', phone:'555-8765', age:29, date:'10/30/2013 12:37:32 AM'}]"></div>
 
<table ng:init="predicate='-age'">
  <tr>
    <th><a href="" ng:click="predicate = 'name'; reverse=!reverse">Name</th>
    <th><a href="" ng:click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
    <th><a href="" ng:click="predicate = 'age'; reverse=!reverse">Age</a></th>
    <th><a href="" ng:click="predicate = 'date'; reverse=!reverse">Date</a></th>
  <tr>
  <tr ng:repeat="friend in friends.$orderBy(predicate, reverse)">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
    <td>{{friend.date | date:'d MMM yyyy'}}</td>
  <tr>
</table>

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; }