Table-sort-js NPM

npm version npm downloads repo size MIT licence build status

TABLE-SORT-JS.

Description: HTML table sorting library with sort type inference builtin and browser extension available. #VanillaJS
Demo
Documentation. (work in progress)
npm package. and jsDelivr
Firefox and Chrome browser extensions: Tables of any website you visit become sortable!

<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>

Or non-minified version (larger size, but easier to debug!):

<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js"></script>

Example on how to use table-sort-js with HTML

npm install table-sort-js

import tableSort from "table-sort-js/table-sort.js";

Examples on using table-sort-js with frontend frameworks such as React.js and Vue.js

<table> classes	Description
"table-sort"	Make the table sortable! (Words, numbers, dates, file sizes)...
"no-class-infer"	Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort).
"table-arrows"	Display ascending or descending triangles.
"remember-sort"	If clicking on different columns remembers sort of the original column.
"cells-sort"	sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place.

<th> classes	Description
"data-sort"	Sort by data attributes, e.g <td data-sort="42">. Useful for doing custom sorts.
"dates-mdy-sort"	Sorts dates in US style mm/dd/yyyy format;. e.g (12/28/2023). Can use "/" or "-" as separator. Overides inferred "dates-dmy-sort" class.
"onload-sort"	Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column)
"disable-sort"	Disallow sorting the table by this specific column.

<th> Inferred Classes.	Description
"numeric-sort"	Sorts numbers including decimals - Positive, Negative (in both minus and parenthesis representations).
	Supports common currencies e.g ($£€¥) and percentage signs e.g (0.39%)
"dates-dmy-sort"	Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" as separator.
"dates-ymd-sort"	Sorts dates in ISO 8601 yyyy/mm/dd format. e.g (2021/10/28). Use "/" or "-" as separator.
"file-size-sort"	Sorts file sizes(B->TiB) uses the binary prefix. (e.g 10 B, 100 KiB, 1 MiB); optional space between number and prefix.
"runtime-sort"	Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column...

<th> Classes that change defaults.	Description
"order-by-desc"	Order by descending on first click. (default is aescending)
"alpha-sort"	Sort alphabetically (z11,z2); default is natural sort (z2,z11).
"punct-sort"	Sort punctuation; default ignores punctuation.