Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leewannacott/table-sort-js
HTML table sorting with no dependencies.
https://github.com/leewannacott/table-sort-js
beginner-friendly good-first-issue html html-tables javascript sort-table sortable sorting table table-sort table-sort-js table-sorting vanilla-js
Last synced: 4 days ago
JSON representation
HTML table sorting with no dependencies.
- Host: GitHub
- URL: https://github.com/leewannacott/table-sort-js
- Owner: LeeWannacott
- License: mit
- Created: 2020-10-22T09:37:17.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-12T11:15:06.000Z (about 1 month ago)
- Last Synced: 2024-12-09T15:50:02.674Z (12 days ago)
- Topics: beginner-friendly, good-first-issue, html, html-tables, javascript, sort-table, sortable, sorting, table, table-sort, table-sort-js, table-sorting, vanilla-js
- Language: JavaScript
- Homepage: https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.js
- Size: 2.31 MB
- Stars: 76
- Watchers: 5
- Forks: 26
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.jsdelivr.com/package/npm/table-sort-js)
[](https://github.com/prettier/prettier)
# TABLE-SORT-JS.
- Description: HTML table sorting library with sort type inference builtin and browser extension available. [#VanillaJS](http://vanilla-js.com/)
- [Demo](https://leewannacott.github.io/Portfolio/#/GitHub)
- [Documentation.](https://leewannacott.github.io/table-sort-js/docs/about.html)
(work in progress)
- [npm package.](https://www.npmjs.com/package/table-sort-js) and [jsDelivr](https://www.jsdelivr.com/package/npm/table-sort-js)
- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/table-sort-js/) and [Chrome](https://chrome.google.com/webstore/detail/table-sort-js/dioemkojkjhlhmfiocgniipejgkbfibb) browser extensions: Tables of any website you visit become sortable!
## Install instructions.
- Option 1: Load as script from a Content Delivery Network (CDN):
```javascript
```
Or non-minified version (larger size, but easier to debug!):
```javascript
```
Example on how to use table-sort-js with [HTML](https://leewannacott.github.io/table-sort-js/docs/html5.html)
- Option 2: Install from npm:
```javascript
npm install table-sort-js
```
```javascript
import tableSort from "table-sort-js/table-sort.js";
```
Examples on using table-sort-js with frontend frameworks such as [React.js](https://leewannacott.github.io/table-sort-js/docs/react.html) and [Vue.js](https://leewannacott.github.io/table-sort-js/docs/vue.html)
## 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](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11). |
| "punct-sort" | Sort punctuation; default ignores punctuation. |
## Development:
If you wish to contribute, install instructions can be found [here.](https://leewannacott.github.io/table-sort-js/docs/development.html)