JSFiddle - React, Tailwind, and code Playground

Character Names (3)

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="(i,th) in head" ng:class="selectedClass(i)" ng-click="order(i)">{{th}}</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.predicate = ['worldIndex', 'worldSlot'];
  $scope.reverse = false;
  $scope.order = function(predicate) {
    $scope.reverse = (predicate === $scope.predicate || (predicate === 'a' && $scope.predicate.constructor === Array)) ? !$scope.reverse : false;
    if(predicate == 'a') {
    	predicate = ['worldIndex', 'worldSlot'];
    }
    $scope.predicate = predicate;
  };
  $scope.selectedClass = function(predicate) {
    return (predicate === $scope.predicate || (predicate === 'a' && $scope.predicate.constructor === Array)) && 'sort-' + $scope.reverse;
  };
  $scope.playerCounts = {
    "Scania":    {index:0, count: 0},
    "Bera":      {index:1, count: 0},
    "Broa":      {index:2, count: 0},
    "Windia":    {index:3, count: 0},
    "Khaini":    {index:4, count: 0},
    "Bellocan":  {index:5, count: 0},
    "Mardia":    {index:6, count: 0},
    "Kradia":    {index:7, count: 0},
    "Yellonde":  {index:8, count: 0},
    "Demethos":  {index:9, count: 0},
    "Galicia":   {index:10, count: 0},
    "El Nido":   {index:11, count: 0},
    "Zenith":    {index:12, count: 0},
    "Arcania":   {index:13, count: 0},
    "Chaos":     {index:14, count: 0},
    "Nova":      {index:15, count: 0},
    "Renegades": {index:16, count: 0},
    "Reboot":    {index:17, count: 0}
  };/*
  $scope.slotsEstablished = true;
  $scope.origPlayerCount = angular.copy($scope.playerCount);
  //{{$last ? reset(row.a, $index) : unset(row.a, $index)}}
  $scope.incrementWorld = function(world,...