JSFiddle - React, Tailwind, and code Playground

Character Names (4)

by MegaScience

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://8e6f14a30165e645047a67c9ff3f3187315fa515.googledrive.com/host/0B3GcDUG6lmlMTzhUZk1NMGRhaWc/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter" ng-controller="mainController">
  <thead>
    <tr>
      <th ng-repeat="col in head" ng:class="selectedClass(col.sort)" ng-click="order(col.sort)">{{col.title}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in body | orderBy:predicate:reverse">
      <td>{{row.a}} {{row.worldSlot}}</td>
      <td>{{row.b}}</td>
      <td>{{row.c}}</td>
    </tr>
  </tbody>
</table>

CSS

/* tables */

table.tablesorter {
  font-family: arial;
  background-color: #CDCDCD;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
  table-layout: fixed;
}

table.tablesorter thead tr th,
table.tablesorter tfoot tr th {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
}

table.tablesorter thead tr .header,
table.tablesorter thead tr th {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}

table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}

table.tablesorter tbody tr.odd td,
table.tablesorter tbody tr:nth-child(odd) td {
  background-color: #F0F0F6;
}

table.tablesorter thead tr .headerSortUp,
table.tablesorter thead tr .sort-true {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .sort-false {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}

table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp,
table.tablesorter thead tr .sort-true,
table.tablesorter thead tr .sort-false {
  background-color: #8dbdd8;
}

JavaScript

// http://stackoverflow.com/questions/20111636/index-of-object-in-array-while-using-ng-repeat-and-a-filter
// http://stackoverflow.com/questions/24866492/custom-order-using-orderby-in-ng-repeat
// http://stackoverflow.com/questions/17037524/orderby-multiple-fields-in-angular

// http://stackoverflow.com/questions/14478106/angularjs-sorting-by-property

var theModule = angular.module('generateTableApp', []).controller('mainController', ['$scope', mainController]);

function mainController($scope) {
  $scope.order = function(predicate) {
    $scope.reverse = angular.equals(predicate, $scope.predicate) ? !$scope.reverse : false;
    $scope.predicate = predicate;
  };
  $scope.selectedClass = function(predicate) {
    return angular.equals(predicate, $scope.predicate) && 'sort-' + $scope.reverse;
  };
  $scope.worldInfo = {
    "Scania": {
      worldOrder: 0,
      playerCount: 0,
      characters: []
    },
    "Bera": {
      worldOrder: 1,
      playerCount: 0,
      characters: []
    },
    "Broa": {
      worldOrder: 2,
      playerCount: 0,
      characters: []
    },
    "Windia": {
      worldOrder: 3,
      playerCount: 0,
      characters: []
    },
    "Khaini": {
      worldOrder: 4,
      playerCount: 0,
      characters: []
    },
    "Bellocan": {
      worldOrder: 5,
      playerCount: 0,
      characters: []
    },
    "Mardia": {
      worldOrder: 6,
      playerCount: 0,
      characters: []
    },
    "Kradia": {
      worldOrder: 7,
      playerCount: 0,
      characters: []
    },
    "Yellonde": {
      worldOrder: 8,
      playerCount: 0,
      characters: []
    },
    "Demethos": {
      worldOrder: 9,
      playerCount: 0,
      characters: []
    },
    "Galicia": {
      worldOrder: 10,
      playerCount: 0,
      characters: []
    },
    "El Nido": {
      worldOrder: 11,
      playerCount: 0,
      characters: []
    },
    "Zenith": {
      worldOrder: 12,
      playerCount: 0,
      characters: []
    },
    "Arcania": {
     ...