Package Exports
- table-sort-js
- table-sort-js/table-sort.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (table-sort-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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: Install from npm:
npm install table-sort-jsimport tableSort from "table-sort-js/table-sort.js";Examples on using table-sort-js with frontend frameworks such as React.js and Vue.js
- Option 2: Load as script from a Content Delivery Network (CDN):
<script src="https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.js"></script>Or Minified (smaller size, but harder to debug!):
<script src="https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.min.js"></script>Refer to the documenation for examples on how to use table-sort-js with HTML
- Option 3: Download table-sort.js (Select save as.), or download a minified version (~5kB)
Then rename and add the following script before your HTML table:
<script src="table-sort.js"></script>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)... |
| "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. |
| <th> classes | Description |
|---|---|
| "data-sort" | Sort by data attributes, e.g <td data-sort="42"> |
| "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) |
| "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.