npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sotable

v0.5.8

Published

Accessible, sortable HTML table

Downloads

1

Readme

sotable

A tool to make any HTML table sortable by the user.

See it in action

Visit the codepen.

Usage

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();

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. 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.

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. (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).

References

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.