sotable
Make any HTML table sortable
See it in action #
Visit the codepen.
Usage #
Download sotable-min.js
from GitHub and put that file into the <head>
section of your HTML page.
<script src="sotable-min.js"></script>
<script>
addEventListener('load', () => sotable()); //activate sotable functionalty on load
</script>
To experiment and dive deeper, it´s best to clone the entire repository and investigate the index.html
, which serves as an example. Sotable is also available as an npm package.
npm i sotable
const sotable = require('sotable');
sotable.run();
Function #
sotable will query all tables on a web page and turn each table with <th>
elements in the first table row into a sortable table. An explanation of the sort behavior will be added to the table <caption>
. If the table doesn´t have a caption, it will be created.
Settings #
sotable can run without any configuration, like in the example above. Nevertheless sotable can be called with a settings object.
<script src="sotable-min.js"></script>
<script>
//call sotable with a settings object
//the shown values are the default values
addEventListener('load', () => sotable({
indicatorAsc: 'ᐃ',
indicatorDsc: 'ᐁ',
sortHint: 'Sort the table by clicking on a column heading.',
restoreHint: 'Restore the original order by clicking <button>Restore Order</button>.',
whiteList: '',
blackList: ''
})); //activate sotable functionalty on load
</script>
Explanation of the settings:
indicatorAsc
: A symbol to indicate that a table column is sorted in ascending order.indicatorDsc
: A symbol to indicate that a table column is sorted in descending order.sortHint
: The text to add to the table caption to inform the user how to sort the table.restoreHint
: The text to add to the table caption to inform the user how to revert sorting to the initial state. The<button>
element will be injected with functionality to revert the sorting.whiteList
: A selector pattern[1], separated by comma, to select only those tables for sorting that fall into the whitelist query. The selector.soso
is available, even without adding it to thewhiteList
.blackList
: A selector pattern, separated by comma, to not select those tables for sorting that fall into the whitelist query.blackList
has higher priority thanwhiteList
. The selector.noso
is available, even without adding it to theblackList
.
Accessibility #
Many design decisions for proper accessibility of sotable stem from Sortable table columns by Adrian Roselli. Among those are
- Use the table caption to indicate the table is sortable.
- Use aria-sort to indicate what column is sorted into what direction.
- Use buttons (and not links) inside of the
<th>
elements to activate sorting[2].
References #
- JavaScript Sort HTML Table
- Sortable table columns, by Adrian Roselli.
Generally, use buttons for performing an action on the site and use links for sending the user somewhere. Source: Six ways to make your site more accessible ↩︎