JSFiddle - React, Tailwind, and code Playground

by garyh

HTML

<div ng-app="app">

    <div ng-controller="controller">
    
        <p>{{orderProperty}}</p>
        <div class="col-md-10">
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th><a ng-click="sortProperty('a')">Status</a></th>
                    <th><a ng-click="sortProperty('b')">Ref</a></th>
                    <th><a ng-click="sortProperty('c')">Service</a></th>
                    <th><a ng-click="sortProperty('d')">Domain</a></th>
                    <th><a ng-click="sortProperty('e')">Service Owner</a></th>
                    <th><a ng-click="sortProperty('f')">Stage</a></th>
                </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in projects | orderBy:orderProperty">
                        <td><b>{{x.a}}</b></td>
                        <td>{{x.b}}</td>
                        <td>{{x.c}}</td>
                        <td>{{x.d}}</td>
                        <td>{{x.e}}</td>
                        <td>{{x.f}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    
</div>

JavaScript

var app = angular.module('app', []); 

app.controller('controller', function($scope) {
        $scope.orderProperty = "+f";
        $scope.projects = [
              {
                a : "G",
                b : "123",
                c : "Service 1",
                d : "Domain 6",
                e : "Owner 1",
                f : "Build"
              },
                 {
                a : "R",
                b : "456",
                c : "Service 2",
                d : "Domain 5",
                e : "Owner 2",
                f : "Build"
              },
                 {
                a : "G",
                b : "789",
                c : "Service 3",
                d : "Domain 4",
                e : "Owner 3",
                f : "Proposed"
              },
                 {
                a : "G",
                b : "987",
                c : "Service 4",
                d : "Domain K",
                e : "Owner 4",
                f : "Build"
              },
                 {
                a : "R",
                b : "654",
                c : "Service 5",
                d : "Domain 2",
                e : "Owner 5",
                f : "Proposed"
              },
              {
                a : "G",
                b : "321",
                c : "Service 4",
                d : "Domain 1",
                e : "Owner 6",
                f : "Proposed"
              }
        ];
    
          $scope.sortProperty = function(column) {
            var currentColumn = $scope.orderProperty.slice(1);
            var currentDirection = $scope.orderProperty.slice(0, 1);
            var dir = '+';
 
            if (column === currentColumn) {
                dir = currentDirection === '+' ? '-' : '+';
            }
            $scope.orderProperty = dir + column;
        };
    
    
});