Author: | oleksavyshnivsky |
---|---|
Views Total: | 450 views |
Official Page: | Go to website |
Last Update: | September 5, 2023 |
License: | MIT |
Preview:

Description:
A vanilla JS table sorter that allows you to sort data in an HTML table by clicking the header of a column.
How to use it:
1. Add the minified version of the tablesort library to the page.
<script src="tablesort.min.js"></script>
2. Determine the sort type in the data-sort attribute:
<table class="table-sortable"> <thead> <tr> <th data-sort="string">String</th> <th data-sort="int">Int</th> <th data-sort="float">Float</th> <th data-sort="date">Date</th> </tr> </thead> <tbody> ... </tbody> </table>
3. Initialize the tablesort on the HTML table and done.
document.querySelector('.table-sortable').tsortable()
4. Recommended CSS styles.
[data-sort]:hover { cursor: pointer; } [data-dir="asc"]:after { content: ' ↗'; } [data-dir="desc"]:after { content: ' ↘'; }
Changelog:
v1.2.0 (09/05/2023)
- Update