https://github.com/aodin/tablesorter
Native JS tablesorter
https://github.com/aodin/tablesorter
Last synced: 3 months ago
JSON representation
Native JS tablesorter
- Host: GitHub
- URL: https://github.com/aodin/tablesorter
- Owner: aodin
- License: mit
- Created: 2024-02-29T19:26:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-02T18:35:20.000Z (11 months ago)
- Last Synced: 2025-01-21T14:12:18.446Z (4 months ago)
- Language: JavaScript
- Size: 52.7 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
tablesorter
===========
Native JS tablesorter. [View a live example](https://aodin.github.io/tablesorter/).
Install with:
```
npm i @aodin/tablesorter
```
A minified JS file and map is included in the `dist` directory along with optional CSS styles.
### Usage
Tables must be initialized before sorting is active.
```js
tablesorter.New(document.getElementById("table"))
```
Or to initialize all tables with a certain class, such as `tablesorter`:
```js
document.querySelectorAll(".tablesorter").forEach(elem => tablesorter.New(elem))
```
Column types can be explicitly set using a `data-type` attribute on the `th` element. For example:
```html
Data
```
To prevent a column from being sortable, add a `no-sort` class to the `th` element.
Sorting can also be performed with the `sortAsc` and `sortDesc` methods:
```js
const table = tablesorter.New(elem)
table.sortAsc(1)
table.sortDesc(1)
```
### Project summary
* Native JS with no dependencies
* About 1kb minified and compressed
* Module and ES6 export based file structure
* Simple class-based states: `active`, `asc`, `desc`
* Reads from either the data attribute `data-value` or HTML inner text
* Uses local string comparison
* Default sort for text columns is ascending, default sort for numeric is descending
* Table fires a `sort` event when sorted, which includes col and asc details
* Includes example Sass and CSS styles
* MIT license
### Development
Test with:
```
npm test
```
Build with:
```
npm run build
```
Happy hacking!
aodin, 2024