The Table Sort code snippet will automatically append ↑ (up) and ↓ (down) arrows next to <th> text in the <thead> of any table with the class name table-sort. Clicking on the up arrow will sort the rows alphanumerically by that column's values. Clicking on the down arrow will, in contrast, sort the rows in reverse alphanumeric order.
If the <th> has the class name table-sort-default, then it is assumed the table is already sorted by that column. The default arrow for that column will then be ↓ (down) to reverse sort.
This is an example table with the class name table-sort. The Numerical <th> has the class name table-sort-default.
| Alphabetical | Numerical | Spanish |
|---|---|---|
| One | 1 | Uno |
| Two | 2 | Dos |
| Three | 3 | Tres |
| Four | 4 | Cuatro |
| Five | 5 | Cinco |
| Six | 6 | Seis |
| Seven | 7 | Siete |
| Eight | 8 | Ocho |
| Nine | 9 | Nueve |
| Ten | 10 | Diez |
To use this script, you must append the table-sort class names to any <table>s to be sortable. You may optionally give any <th>s the table-sort-default class. Once you have one or more tables with the aforementioned class name, add the following script to the end of your document, just before </body>:
<script src="https://raw.githubusercontent.com/CharlesStover/table-sort/master/table-sort.min.js" type="text/javascript"></script>