A lightweight, dependency-free ES module that adds sortable behavior to an HTML table.
Supports single-column sorting, multi-column sorting with Shift+click, numeric/text auto-detection, and persistent sort state via localStorage.
Install from the npm registry:
npm install @eydun/table-sorter
Copy: src/table-sorter.js
<script type="module">
import { tableSorter } from './src/table-sorter.js';
// Use '#id' for a single table or '.class' to initialize multiple tables
tableSorter('#myTable').init();
</script>
HTML setup
Add data-sort attribute to any header you want to make sortable. If the attribute is present without a value (e.g. <th data-sort>), the current column index is used. You can also place data-sort on a <thead> element to enable sorting on all its header cells; individual header cells can opt out by setting data-no-sort on a <th>. Sort icons are automatically inserted.
<table id="myTable">
<thead>
<tr>
<th data-sort>Name</th>
<th data-sort>Age</th>
<th data-sort>City</th>
</tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td><td>Paris</td></tr>
<tr><td>Bob</td><td>22</td><td>London</td></tr>
</tbody>
</table>
Column indices are auto-detected from order. For explicit control use data-sort="0", data-sort="1", etc.
Initialize:
<script type="module">
import { tableSorter } from '@eydun/table-sorter';
// Use '#id' for a single table or '.class' to initialize multiple tables
tableSorter('#myTable').init();
</script>
Multi-column sorting:
Hold Shift when clicking another column header to add or change secondary/tertiary sort rules.
Sort order is stored per table using:
localStorage["vts-sortOrders-<table-id>"]
Refreshing the page restores the last sort order.
Click to see a demo.
Only one entry point:
import { tableSorter } from '@eydun/table-sorter';
// Use '#id' for a single table or '.class' to initialize multiple tables
tableSorter('#myTable').init();
No global state, no framework required.
(Modern browsers; no IE.)
Released under the MIT License. See LICENSE.
Pull requests and issues are welcome.