A tool to make any HTML table sortable by the user.
Visit the codepen.
Download sotable-min.js from GitHub and put that file into the <head> of your HTML page. Example:
HTML to embed sotable-min.js into a web 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.
Install the sotable npm package
npm i sotable
Use the sotable npm package
const sotable = require('sotable');
sotable.run();
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. Example:
Calling sotable 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 (see Locating DOM elements using selectors), 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 the whiteList.blackList: A selector pattern, separated by comma, to not select those tables for sorting that fall into the whitelist query. blackList has higher priority than whiteList. The selector .noso is available, even without adding it to the blackList.Many design decisions for proper accessibility of sotable stem from Sortable table columns by Adrian Roselli. Among those are
<th> elements to activate sorting. (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).sotable is influenced by JavaScript Sort HTML Table, which has a neat way of leveraging selectors for sorting, like tr:nth-child(n+2). In this context, please refer to How nth-child works and :nth tester.
FAQs
Accessible, sortable HTML table
We found that sotable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.