JSFiddle - React, Tailwind, and code Playground

by dreamyguy

HTML

<div ng-app="myApp">
	<div ng-controller="PurchasesCtrl">
        <h2>Purchases:</h2>
		<table cellspacing="0">
			<tr class="first">
				<th class="first" ng-click="changeSorting('date')">Date</th>
				<th ng-click="changeSorting('text')">Description</th>
				<th ng-click="changeSorting('price')">Amount</th>
				<th ng-click="changeSorting('availability')">Status</th>
			</tr>
			<tr ng-repeat="purchase in purchases.data|orderBy:sort.column:sort.descending">
				<td class="first">{{purchase.date}}</td>
				<td>{{purchase.text}}</td>
				<td>{{purchase.price}}</td>
				<td>{{purchase.availability}}</td>
			</tr>
        </table>
	</div>
</div>

CSS

body { font: 12px arial, helvetica, sans-serif; }
h2 { font-size: 16px; }
table { margin: 20px 0; border-collapse:collapse; }
th,td { border: 1px solid #ccc; padding: 2px; }

JavaScript

var myApp = angular.module("myApp",[]);
myApp.factory("Purchases", function(){
    var Purchases = {};
    Purchases.data = [
        {
            date: "10/05/2012",
            text: "1 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£123.45",
            availability: "1 Available until 10th Dec 2013"
        },
        {
            date: "24/05/2012",
            text: "2 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£234.56",
            availability: "2 Available until 10th Dec 2013"
        },
        {
            date: "20/05/2012",
            text: "3 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£345.67",
            availability: "3 Available until 10th Dec 2013"
        }
    ];
    return Purchases;
});
function PurchasesCtrl($scope, Purchases){
    $scope.purchases = Purchases;
    $scope.sort = {
        column: '',
        descending: false
    };    
    $scope.changeSorting = function(column) {
        var sort = $scope.sort;
        if (sort.column == column) {
            sort.descending = !sort.descending;
        } else {
            sort.column = column;
            sort.descending = false;
        }
    };
}