JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="ContactListCtrl">
<h1>AngularJS Sorting Example</h1>

<table class="contacts">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>

  <tr ng-repeat="contact in contacts | orderBy:randomSort">
    <td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td>
    <td ng-class-even="'even'">{{contact.telephone}}</td>
  </tr>
</table>
</div>

CSS

body { font:12px arial, sans-serif; line-height:1.6em; margin:0 auto; max-width:960px; }
h1, select, table { margin-bottom:20px; }
table { width:80%; }
th, td { padding:5px; text-align:left; vertical-align:top; }
th { background:#ccc; }
.even { background-color:#efefef; }

JavaScript

function ContactListCtrl($scope){
  $scope.contacts = 
  [
    { "name":"Richard", "surname":"Stallman", "telephone":"1234 98765" },
    { "name":"Linus", "surname":"Torvalds", "telephone":"2345 87654" },
    { "name":"Donald", "surname":"Knuth", "telephone":"3456 76543" }
  ];
    
  $scope.randomSort = function(contact) {
    return Math.random();
  };
};