Example
String |
String (UA) |
Int |
Float |
Date |
A |
Авто |
5 |
2.3 |
2021-06-22 |
B |
крок |
3 |
3.2 |
2021-06-21 |
E |
Європа |
4 |
6.4 |
2021-06-23 |
d |
Індія |
1 |
7.5 |
2021-06-20 |
C |
Шепіт |
2 |
2.411 |
2021-06-24 |
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>
</tr>
</thead>
<tbody>
...
... (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: ' ↘';
}