table-sort-js
v1.22.1
Published
A JavaScript client-side HTML table sorting library with no dependencies required.
Downloads
8,608
Maintainers
Readme
TABLE-SORT-JS.
Description: HTML table sorting library with sort type inference builtin and browser extension available. #VanillaJS
Documentation. (work in progress)
npm package. and jsDelivr
Firefox and Chrome browser extensions: Tables of any website you visit become sortable!
Install instructions.
- Option 1: Load as script from a Content Delivery Network (CDN):
<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
- Option 2: Install from npm:
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
To make tables sortable:
- Add
class="table-sort"
to HTML <table> tags. - Click on table headers to sort columns.
Classes:
| <table> classes | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------ | | "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... | | "table-arrows" | Display ascending or descending arrows. Supports custom arrows; for example: "table-arrows-⇈⇋⇊" | | "no-class-infer" | Turns off inference for adding sort classes automatically e.g (file-size-sort, dates-dmy-sort), etc. | | "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. |
Development:
If you wish to contribute, install instructions can be found here.