JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="CustomersController as hmm">
        <h2>Customers</h2>
        Filter: <input type="text" ng-model="customerFilter.name">
        <br><br>
        <table>
            <tr>
                <th ng-click="doSort('name')">Name</th>
                <th ng-click="doSort('city')">City</th>
                <th ng-click="doSort('orderTotal')">Order</th>
                <th ng-click="doSort('joined')" >Joined</th>
            </tr>
            <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
                <td>{{ cust.name | uppercase }}</td>
                <td>{{ cust.city | lowercase }}</td>
                <td>{{ cust.orderTotal | currency }}</td>
                <td>{{ cust.joined | date }}</td>
            </tr>
        </table>
        <br>
        <span>Total customers: {{ customers.length }}</span>
        <script src="angular.js"></script>
        <script src"app/controllers/customersController.js"></script>
    </div>
</div>

JavaScript

function CustomersController($scope) {
  $scope.sortBy = 'name';
  $scope.reverse = false;

  $scope.customers = [{
    joined: '2012-12-02',
    name: 'Dylan',
    city: 'Buffalo',
    orderTotal: 9.521
  }, {
    joined: '1932-12-02',
    name: 'Pete',
    city: 'Detroit',
    orderTotal: 111.521
  }, {
    joined: '1967-11-04',
    name: 'Sampress',
    city: 'Kanas City',
    orderTotal: 92.521
  }];
  $scope.doSort = function(propName) {
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
  };
}

window.CustomersController = CustomersController;