Package Exports
- 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: 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-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
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.