JSFiddle - React, Tailwind, and code Playground

Character Names (Old)

by MegaScience

HTML

<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)" colspan="{{col.span || 1}}">{{col.title}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in body | orderBy:sort.predicate:sort.reverse">
      <td><span class="world world{{row.worldIndex}}">{{row.worldSlot}}</span></td>
      <td>{{row.name}}</td>
      <td ng-repeat="refer in row.reference" colspan="{{$last ? 4 - row.reference.length : 1}}">{{refer}}</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;*/
  line-height: 1.5em;
}

table.tablesorter tbody td, table.tablesorter thead tr th {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  vertical-align: middle;
}

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;
}

.world0::before {
  content: "Scania ";
}

.world1::before {
  content: "Bera ";
}

.world2::before {
  content: "Broa ";
}

.world3::before {
  content: "Windia ";
}

.world4::before {
  content: "Khaini...

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.head = [{
    title: "Server/Slot",
    sort: ['worldIndex', 'worldSlot']
  }, {
    title: "Character Name",
    sort: 'name'
  }, {
    title: "Reference",
    sort: ['reference', 'name.length'],
    span: 3
  }];
  $scope.sort = {
    predicate: $scope.head[0].sort,
    reverse: false
  };
  $scope.order = function(predicate) {
    $scope.sort.reverse = angular.equals(predicate, $scope.sort.predicate) ? !$scope.sort.reverse : false;
    $scope.sort.predicate = predicate;
  };
  $scope.selectedClass = function(predicate) {
    return angular.equals(predicate, $scope.sort.predicate) && 'sort-' + $scope.sort.reverse;
  };
  $scope.worldInfo = {
    "Scania": {
      "worldOrder": 0,
      "characters": [{
        "name": "hctiBgnikcuF",
        "reference": ["Misc"]
      }, {
        "name": "KenLevine",
        "reference": ["Videogame", "BioShock"]
      }, {
        "name": "MirYannick",
        "reference": ["Videogame", "Zork"]
      }, {
        "name": "AnthariaJack",
        "reference": ["Videogame", "Zork"]
      }, {
        "name": "LucyFlathead",
        "reference": ["Videogame", "Zork"]
      }, {
        "name": "Dalboz",
        "reference": ["Videogame", "Zork"]
      }, {
        "name": "KeHuyQuan",
        "reference": ["Movie", "Goonies"]
      }, {
        "name": "MamaFratelli",
        "reference": ["Movie", "Goonies"]
      }, {
        "name": "SpacebaIIs",
        "reference": ["Movie", "Spaceballs"]
      }, {
        "name":...