JSFiddle - React, Tailwind, and code Playground

by creed88

HTML

<div ng-app ng-controller="ArrayController">
        <table>
            <th ng-repeat="header in headers">
                <a ng-click="toggleSort($index)">{{ headers[$index] }}</a>
            </th>
            <tr ng-repeat="arr in records | orderBy:sortColumn:reverse">
                <td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]"></td>
            </tr>
        </table>
        sortColumn: {{sortColumn}}<br/>
        reverse: {{reverse}}
    </div>

JavaScript

function ArrayController($scope) {
    $scope.headers = ['colA', 'colB'];
    $scope.records = [{'colA': 'a1', colB: 'd1'}, {'colA': 'c2', colB: 'b2'}, {'colA': 'b3', colB: 'c3'}, {'colA': 'd4', colB: 'a4'}];

    $scope.sortColumn = 'colA';
    
    $scope.toggleSort = function(index) {
        if($scope.sortColumn === $scope.headers[index]){
            $scope.reverse = !$scope.reverse;
        }                    
        $scope.sortColumn = $scope.headers[index];
    }
}