JSFiddle - React, Tailwind, and code Playground

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">
                <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 = ['col:A', 'colB'];
    $scope.records = [{'col:A': 'a1', colB: 'd1'}, {'col:A': 'å2', colB: 'b2'}, {'col:A': 'æ3', colB: 'c3'}, {'col:A': 'ø4', colB: 'a4'}];

    $scope.sortColumn = 'col:A';
    
    $scope.toggleSort = function(index) {
        if($scope.sortColumn === $scope.headers[index]){
            $scope.reverse = !$scope.reverse;
        }
        if ($scope.reverse) {
         $scope.records.reverse();   
        } else {
            $scope.records = $scope.records.sort(localeCompare);
        }
        $scope.sortColumn = $scope.headers[index];
    }
        
    function compare(a,b,property) {
      if (a[property] < b[property])
         return -1;
      if (a[property] > b[property])
        return 1;
      return 0;
    }
    
    
}