JSFiddle - React, Tailwind, and code Playground
My Characters (10/18/2015) Includes name changes.
by MegaScience
HTML
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>
<table ng:controller="SortableTableCtrl">
<thead>
<tr>
<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
</tr>
</thead>
<tbody>
<tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
<td>{{row.a}}</td>
<td>{{row.b}}</td>
<td>{{row.c}}</td>
</tr>
</tbody>
</table>
CSS
td {
padding: 0.2em 1em;
}
th {
text-align: center;
}
thead {
border-bottom: 2px solid black;
cursor: pointer;
}
/* http://www.greywyvern.com/code/php/binary2base64 */
.sort-true {
background:no-repeat right center url(data:image/gif;
base64,...
JavaScript
function SortableTableCtrl() {
var scope = this,
i = 0;
// data
scope.head = {
a: "Server/Slot",
b: "Username",
c: "Reference"
};
scope.body = [{
a: "Renegades 1",
b: "TwoGirlsOne",
c: "Misc"
}, {
a: "Renegades 2",
b: "OrphanAnnie",
c: "Annie"
}, {
a: "Renegades 3",
b: "DaddyWarbuck",
c: "Annie"
}, {
a: "Renegades 4",
b: "Greedo",
c: "Star Wars"
}, {
a: "Renegades 5",
b: "Rodian",
c: "Star Wars"
}, {
a: "Renegades 6",
b: "NintendoDSi",
c: "Nintendo"
}, {
a: "Renegades 7",
b: "ShenhauLing",
c: "Shenmue"
}, {
a: "Renegades 8",
b: "YuSuzuki",
c: "Shenmue"
}, {
a: "Nova 1",
b: "GrouchoMarx",
c: "Actor"
}, {
a: "Nova 2",
b: "SHEEPRlCK",
c: "UberHaxorNova"
}, {
a: "Nova 3",
b: "DJCasper",
c: "Music"
}, {
a: "Nova 4",
b: "LessThanJake",
c: "Music"
}, {
a: "Nova 5",
b: "SatoruIwata",
c: "Nintendo"
}, {
a: "Nova 6",
b: "JoCo",
c: "Music"
}, {
a: "Nova 7",
b: "Chumbawamba",
c: "Music"
}, {
a: "Nova 8",
b: "DarthMalak",
c: "Star Wars"
}, {
a: "Chaos 1",
b: "ZHComstock",
c: "BioShock"
}, {
a: "Chaos 2",
b: "BastilaShan",
c: "Star Wars"
}, {
a: "Chaos 3",
b: "CarthOnasi",
c: "Star Wars"
}, {
a: "Chaos 4",
b: "MissionVao",
c: "Star Wars"
}, {
a: "Chaos 5",
b: "Zaalbar",
c: "Star Wars"
}, {
a: "Chaos 6",
b: "JoleeBindo",
c: "Star Wars"
}, {
a: "Chaos 7",
b: "T3M4",
c: "Star Wars"
}, {
...