JSFiddle - React, Tailwind, and code Playground

by Moien Tajik

HTML

<body ng-app="myApp" ng-controller="myCtrl">
  <table border="1" width="100%">
    <tr id="head">
      <th ng-click="OrderByMe('name')">Name</th>
      <th ng-click="OrderByMe('country')">Country</th>
    </tr>
    <tr id="details" ng-repeat="x in names | orderBy : myOrderBy">
      <th>{{x.name}}</th>
      <th>{{x.country}}</th>
    </tr>
  </table>
</body>
<script>

	var app = angular.module("myApp" , []);
  app.controller("myCtrl" , function($scope)
  {
  	$scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
        $scope.OrderByMe = function(x)
        {
        	$scope.myOrderBy = x;
        }
  });

</script>

CSS

#head {
  color : darkblue;
}

#details {
  color : darkred;
}