Example 1. Basic table
HTML
<table class="table-sortable">
<thead>
<tr>
<th data-sort="string">String</th>
<th data-sort="string">String (Other lang)</th>
<th data-sort="int">Int</th>
<th data-sort="float">Float</th>
<th data-sort="date">Date</th>
<th data-sort="int">Cells with <code>data-sort-value</code></th>
</tr>
</thead>
<tbody>
...
<td>Value to sort and show</td>
<td data-sort-value="Value to sort">Content to show</td>
... (rest of the table)
JS
<script src="tablesort.min.js"></script>
// One table
<script>document.querySelector('.table-sortable').tsortable()</script>
// More than one table
// <script>document.querySelectorAll('.table-sortable').forEach(el => el.tsortable())</script>
Optional CSS
[data-sort]:hover {
cursor: pointer;
}
[data-dir="asc"]:after {
content: ' ↗';
}
[data-dir="desc"]:after {
content: ' ↘';
}
Optional JS
... functions that update data-sort-value attributes dynamically ...
Example 2. Merged header cells
data-sort-col="0" (auto) |
data-sort-col="2" (auto) |
data-sort-col="1" |
data-sort-col="2" |
1 |
22 |
333 |
11 |
222 |
3 |
111 |
2 |
33 |
HTML
<table class="table-sortable">
<thead>
<tr>
<th data-sort="int" rowspan="2">data-sort-col="0" (auto)</th>
<th data-sort="int" colspan="2">data-sort-col="2" (auto)</th>
</tr>
<tr>
<th data-sort="int" data-sort-col="1">data-sort-col="1"</th>
<th data-sort="int" data-sort-col="2">data-sort-col="2"</th>
</tr>
</thead>
<tbody>
...
... (rest of the table)
Example 3. Big table
bigtable.html