JSFiddle - React, Tailwind, and code Playground

Character Names (1)

by MegaScience

HTML

<script src="https://8e6f14a30165e645047a67c9ff3f3187315fa515.googledrive.com/host/0B3GcDUG6lmlMTzhUZk1NMGRhaWc/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Server/Slot</th>
      <th>Username</th>
      <th>Reference</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Renegades 1</td>
      <td>TwoGirlsOne</td>
      <td>Misc</td>
    </tr>
    <tr>
      <td>Renegades 2</td>
      <td>OrphanAnnie</td>
      <td>Annie</td>
    </tr>
    <tr>
      <td>Renegades 3</td>
      <td>DaddyWarbuck</td>
      <td>Annie</td>
    </tr>
    <tr>
      <td>Renegades 4</td>
      <td>Greedo</td>
      <td>Star Wars</td>
    </tr>
    <tr>
      <td>Renegades 5</td>
      <td>Rodian</td>
      <td>Star Wars</td>
    </tr>
    <tr>
      <td>Renegades 6</td>
      <td>NintendoDSi</td>
      <td>Nintendo</td>
    </tr>
    <tr>
      <td>Renegades 7</td>
      <td>ShenhauLing</td>
      <td>Shenmue</td>
    </tr>
    <tr>
      <td>Renegades 8</td>
      <td>YuSuzuki</td>
      <td>Shenmue</td>
    </tr>
    <tr>
      <td>Nova 1</td>
      <td>GrouchoMarx</td>
      <td>Actor</td>
    </tr>
    <tr>
      <td>Nova 2</td>
      <td>SHEEPRlCK</td>
      <td>UberHaxorNova</td>
    </tr>
    <tr>
      <td>Nova 3</td>
      <td>DJCasper</td>
      <td>Music</td>
    </tr>
    <tr>
      <td>Nova 4</td>
      <td>LessThanJake</td>
      <td>Music</td>
    </tr>
    <tr>
      <td>Nova 5</td>
      <td>SatoruIwata</td>
      <td>Nintendo</td>
    </tr>
    <tr>
      <td>Nova 6</td>
      <td>JoCo</td>
      <td>Music</td>
    </tr>
    <tr>
      <td>Nova 7</td>
      <td>Chumbawamba</td>
      <td>Music</td>
    </tr>
    <tr>
      <td>Nova 8</td>
      <td>DarthMalak</td>
      <td>Star Wars</td>
    </tr>
    <tr>
      <td>Chaos 1</td>
      <td>ZHComstock</td>
      <td>BioShock</td>
    </tr>
    <tr>
      <td>Chaos 2</td>
      <td>BastilaShan</td>
      <td>Star Wars</td>
    </tr>
    <tr>
      <td>Chaos...

CSS

/* tables */

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

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

table.tablesorter thead tr .header {
  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 {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

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

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

JavaScript

// http://tablesorter.com/docs/
var currentWorlds = ["scania", "bera", "broa", "windia", "khaini", "bellocan", "mardia", "kradia", "yellonde", "demethos", "galicia", "el nido", "zenith", "arcania", "chaos", "nova", "renegades", "reboot"],
	currentWorldsL = currentWorlds.length,
	searchRegExp = new RegExp('^(' + currentWorlds.join('|') + ') ([0-9]{1,2})$');

$(document).ready(function() {
  initializer();
});

function initializer() {
  $.tablesorter.addParser({
    id: 'worlds',
    is: function(s) {
      return searchRegExp.test(s.trim().toLowerCase());
    },
    format: function(s) {
    	var a = searchRegExp.exec(s.trim().toLowerCase()),
      		r = "";
      for(var i = 0; i < currentWorldsL; i++) {
      	if(a[1] == currentWorlds[i]) {
        	r += i;
          break;
        }
      }
      r += (a[2].length == 1 ? "0" : "") + a[2];
      return $.tablesorter.formatFloat(r);
    },
    type: 'numeric'
  });
  $("#myTable").tablesorter( {sortList: [[0,0]]} );
}