See it in action #
Visit the codepen.
sotable-min.js from GitHub and put that file into your HTML page.
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.
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.
Sotable can run without any configuration, like in the example above. Nevertheless sotable can be called with a settings object.
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, separated by comma, to select only those tables for sorting that fall into the whitelist query.
blackList: A selector pattern, separated by comma, to not select those tables for sorting that fall into the whitelist query.
blackListhas higher priority than
whiteList. The selector
.nosois generally available, even without adding it to the
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.
tr:nth-child(n+2). In this context, please refer to How nth-child works and :nth tester.
Locating DOM elements using selectors ↩︎
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 ↩︎