Sorter – Lightweight sorting of tables

Just add [data-sort] attributes to the th elements in columns you'd like to sort a table by, include ~1kB of JS & CSS, and initialise with sorter() – and that's it!

• Demo
• Source code
• NPM

Installation

Install as a module:

$ npm i --save avris-sorter
$ yarn add avris-sorter
$ pnpm add avris-sorter
$ bun add avris-sorter

Or use a CDN:

<link rel="stylesheet" href="https://glcdn.githack.com/Avris/Sorter/raw/main/dist/Sorter.min.css">
<script src="https://glcdn.githack.com/Avris/Sorter/raw/main/dist/Sorter.min.js"></script>

(to pin a specific version, replace main with the version tag.)

Usage

HTML

Just make sure that the columns you want to be able to sort by have a [data-sort] attribute:

<th data-sort>Column</th>

If you want to treat the values in the column as numbers, use:

<th data-sort="number">Column</th>

Instead of using the column innerText for sorting, you can specify any arbitrary value in the [data-sort-value] attribute of a cell and set [data-sort] of the column to data or data-number:

<th data-sort="data-number">Balance</th>

...

<td data-sort-value="38.12">38.12€</td>

If you want the table to be automatically sorted by some column after the page is loaded, you can set [data-sort-auto=<direction>]:

<th data-sort="number" data-sort-auto="desc">Points</th>

Markdown-friendly syntax

Markdown syntax doesn't allow specifying attributes on cells. As a workaround, Sorter supports an alternative: add a <wbr data-sort> inside a cell – its data-sort* attributes will be bumped up to the parent cell, and the element itself removed.

| Name <wbr data-sort> | Height <wbr data-sort="data-number"> | Age <wbr data-sort="number"> |
| -------------------- | ------------------------------------ | ---------------------------- |
| Martin               | 189cm <wbr data-sort-value="189">    | 29                           |

<span data-sort></span> is also supported as an alternative to <wbr data-sort>.

ESM / typescript

import sorter from 'avris-sorter';

sorter()
// or:
sorter(<selector>)
// or:
sorter(<domElement>)

CSS

Import the stylesheet via your bundler:

import 'avris-sorter/css';

Or include the CDN link shown above.

Development

bun install
bun run build

Copyright

• Author: Andrea Vos (avris.it)
• Licence: OQL