tablesorter

Native JS tablesorter. View a live example.

Install with:

npm i @aodin/tablesorter

A minified JS file and map is included in the dist directory along with optional CSS styles.

Tables must be initialized before sorting is active.

tablesorter.New(document.getElementById("table"))

Or to initialize all tables with a certain class, such as tablesorter:

document.querySelectorAll(".tablesorter").forEach(elem => tablesorter.New(elem))

Column types can be explicitly set using a data-type attribute on the th element. For example:

<th data-type="numeric">Data</th>

To prevent a column from being sortable, add a no-sort class to the th element.

Sorting can also be performed with the sortAsc and sortDesc methods:

const table = tablesorter.New(elem)
table.sortAsc(1)
table.sortDesc(1)

Native JS with no dependencies
About 1kb minified and compressed
Module and ES6 export based file structure
Simple class-based states: active, asc, desc
Reads from either the data attribute data-value or HTML inner text
Uses local string comparison
Default sort for text columns is ascending, default sort for numeric is descending
Table fires a sort event when sorted, which includes col and asc details
Includes example Sass and CSS styles
MIT license

Test with:

npm test

Build with:

npm run build

Happy hacking!

aodin, 2024

Provide feedback