Native ability to sort a <table>

[scottkellum]

Sorting a table is common functionality added to a table via JavaScript. It would be helpful to have this functionality natively added to tables.

Related material:

• https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/
• https://blog.logrocket.com/creating-react-sortable-table/
• https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript
• https://javascript.info/task/sortable-table
• https://webdesign.tutsplus.com/how-to-create-a-sortable-html-table-with-javascript--cms-92993t
• https://github.hubspot.com/sortable/docs/welcome/

Possible solution: add an attribute to a of sortable="true" with a ::marker of up/down (like ) for un-sorted, ▼ for descending, and ▲ for ascending.

[scottkellum]

Goals: Gauge appetite for this functionality and OpenUI’s appetite for creating an explainer/alignment on a proposal.

[LeaVerou]

First, huge +1 on addressing the user need. Sorting, filtering etc should be possible declaratively, out of the box. This would also allow extensions to enable this functionality on any table on the web.

Nit: sortable="true" is not how HTML does booleans. If it's boolean, it should be sortable with no value (I also opened w3ctag/design-principles#451 about this).

I imagine the first thing to be ironed out would be how do we sort? Lexicographically is rarely useful for strings, but do we really want to duck type numbers, with all the localization implications this ensues? Perhaps we also need an enumerated attribute on <col> about the type of sort? And whether ascending or descending is the default? Also, do we want all columns to participate in this or should it be possible to exclude some? Maybe a sort attribute with grammar like [ [ alphabetic | numeric ] || [ asc | desc ] | none ]

Regardless of which heuristic we pick as the default for values, we'd need to provide some kind of escape hatch for when it fails. For example, we could introduce a value attribute for <td>s, which would override whatever value is in .textContent.

In terms of research, beyond what libraries and frameworks do, we should also look at what productivity tools do, and what UI they expose. E.g. this is from Coda:

[bkardell]

Yeah, totally agree that this is useful. If someone wanted to start research on it there are volumes for sure of different attempts at this in markup - it would be useful to look at what variations there are and why.

"HTML 5" early on had a <datagrid> element, it's hard to point to something that isn't misleading/misrepresentative there though because it was all in such flux, no single date might really "represent" it entirely. Still https://web.archive.org/web/20050602074634/http://www.whatwg.org/specs/web-apps/current-work/#data-grids is one grab that seems "pretty good" from my recollections. We can also look at the mailing lists and irc logs from then for developments and past discussions on that.

But also, these have been in other markups at least as long that tried to do "richer tables" of all kinds that I think are worth study and efforts... Even currently there are 70 custom element "tables" that show up in the recent HTTP Archive crawl, for example https://rainy-periwinkle.glitch.me/permalink/5c27a16fa9188e838ce164e76ebcb0045e555315c5e878b736c9631e776d526c.html

[dbaron]

Another set of documentation for existing table sorting features is https://meta.wikimedia.org/wiki/Help:Sorting which documents sortable tables in mediawiki (which are quite complicated).

[gregwhitworth]

@scottkellum on all table issues the Open UI CG agreed that an explainer in this CG makes sense. Would you be open to championing such an explainer for proposed solutions for the issues?

[scottkellum]

@gregwhitworth thanks for the update. I really wish I had time but both work and personal responsibilities have been absolutely crushing lately.

Apologies I feel like I dropped a big one on OpenUI's plate. I will likely have more time when my daughter starts daycare in 3 months if this can wait until then. If there are grants available I can focus more on this as work.

[keithamus]

For sorting I propose having <th sort=asc>/<th sort=desc> to sort lexicographically and <th sort=asc-numeric>/<td sort=desc-numeric> to sort numerically. In addition perhaps having the IDL allow assigning a comparator function (sort = (a, b) => {...}) could be useful for some customisation of the sorting heuristic. Sorting could use slottable, where the table moves into a state that all rows/columns become slots that can re-organise based on the sort order.

Invokers could play a useful role here for allowing userland to add their own controls to do the sorting, rather than injecting UI elements that then would need styling via something like :marker.

[LeaVerou]

Invokers could play a useful role here for allowing userland to add their own controls to do the sorting, rather than injecting UI elements that then would need styling via something like :marker.

In the spirit of making common things easy, and complex things possible, I think the ideal would be if the UA created controls but the author could provide their own controls as well (via slots?). If all that's needed is to style the UA provided controls, ::marker seems fine.

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[jakearchibald]

In case this gets picked up again: The tricky part here is assuming that the table holds all the data.

Eg, if I'm displaying a table of 'all' Wikipedia pages, it's unlikely that I've created a <tr> per Wikipedia page. It's more likely that I'm displaying a subset of that data, such as the first 100.

If I sorted the table by the 'name' column, descending, I'd expect the top row to display the Wikipedia page with the name that appears last when sorted lexicographically. I wouldn't expect it to display the Wikipedia page with the name that appears 100th when sorted lexicographically.

That leaves a few options:

• Decide that the solution doesn't support subsets of data
• Make the sorting UI non-functional, as in it just fires an event and it's down to the developer to update the content. But… what's the benefit?
• Create some abstracted async "data source" system, where the table can get hold of the data somehow

[keithamus]

Make the sorting UI non-functional, as in it just fires an event and it's down to the developer to update the content. But… what's the benefit?

I think there's another possibility here which is to fire an event which can be .preventDefault()ed to implement your own sorting solution. If you don't .preventDefault() then it'll assume the next step is to sort the table by something (like .textContent).

[jakearchibald]

I wonder how much crossover there is between "I want advanced table features" and "I'm not displaying all the data at once".