Related to this, I’d love that HTML natively support sortable tables. This is a common need but every single time I have to reimplement it.
Related to this, I’d love that HTML natively support sortable tables. This is a common need but every single time I have to reimplement it.
I had always thought that table sorting seems like the perfect job for HTML, given its data-driven nature, and the possibility of implementing sort information into the attributes of table cell elements.
But thinking about it: Is there a precedent for HTML to be able to include information that instructs the device to present the DOM out of order? Maybe it's out of scope for HTML to have information about presentation order, when the order is supposed to be implied strictly by the DOM hierarchy itself.
Of course, CSS can visually reorder stuff (e.g. `order` on flex/grid items), but MDN has accessibility warnings regarding the use of `order` and visually presenting the data in an order not reflected by the DOM. So, maybe sorting is best done by reordering the DOM after all.
XSL has sorting, so kind of, depending on which document you're referring to when you say DOM.
This is… not obvious. It's only easy if you want the simplistic approach of sorting lexicographically or numerically. But in more complex tables, you will often encounter cases where the data representation for sorting is different from data representation for display.
Of course most JavaScript-based tables get this wrong, too.
You could have a `sortkey` attribute, a bit like <option> that has a `value` attribute in case the value you want is different from the value you display.
I feel like there's so few times it would actually work how I want it that it seems like there's little point.
You want client side table sorting?
It's really easy to do this with server rendered HTML. Put a link with the sort param in the column headers and be done.
I used to do this in the early 2000s! Some folks back then would ask whether i was afraid that clicking a link (which loads a "new" web page) would slow things down and create an awful experience for users...but, my team and I would really focus on keeping web pages slim/lightweight to begin with...so it rarely was a problem. I don't think we were geniuses or anything like that, but keeping things light (always and from the beginning) enabled us to "cheat" (like this "hack" of the links in the column headers) in ways that were beneficial but with very low risk. Sometimes it took an extra moment or two at the beginning of an effort...but it ALWAYS paid off down the road, and in many different ways.
It still works exceptionally well in 2026 and generally creates better and faster experiences than an SPA with far, far less code.
You don’t need an SPA for that; Wikipedia has client-side sorted tables for example.
I hate what it does to my back button
HTMX is the solution
So instead of using JS to sort the table directly, now you make a JS fetch() request to sort the table?!
It does make sense in one situation, if the table is a large server-side paginated one and the sorting is really an ORDER BY clause. But for a basic table that fits entirely on the client, it doesn't make sense at all. There are tiny JS libraries that will make <table>s sortable when you add a particular class name.
> tiny JS libraries that will make <table>s sortable
What are some good ones?
Trading one javascript for another?
I want tables that can be sorted on multiple columns without triggering a page refresh on every click.
View Transitions are your friend
That's what javascript is supposed to be for. All of this is what javascript is supposed to be for.
HTML describes layout, CSS describes style, JS adds interactivity.
Want sortable tables? Get a jquery plugin and spend five minutes, done.
This was all solved a decade or more ago.
> Want sortable tables? Get a jquery plugin and spend five minutes, done.
I want sortable tables without having to rely on a third-party plugin to a third-party library. HTML describes content, not just layout. It would be a `sortable` attribute on the table, just like you already have attributes that have nothing to do with layout such as `autocomplete` or `aria-*`.
Everyone already complains that browsers are too bloated and now you want to have every browser support sortable tables when a single, simple JS file would work?
The overwhelming majority of web pages are static documents, and it's a document format, so basic document primitives make sense. Same with something like line charts or pie charts. Bloat is things like USB APIs that present obnoxious security surfaces.
>single, simple JS file
It's all fine and dandy until marketing bros decide to shove all kinds of shady modals into that JS file. The JS side is not exclusive to trivial interactivity.
What "marketing bros?"
It's open source software. You can see what it does, and you just put it on your server. We're talking about pre NPM javascript here, no continuous deployment, everything is vendored and local and no one is going to change that file without your knowledge and permission. And if someone does, you have much bigger problems on your hands.
What you can't own and control is the browser vendors and how they choose to implement things, or not to. You can edit a JS file to your specific needs, but you're stuck with whatever the browser decides.
> HTML describes layout
News to me.
That's understandable, because almost no one actually works with HTML directly anymore, but it's true. HTML contains tags like <H> for headers, <p> for paragraphs, <br> for line breaks <pre> for prerendered text, <ol> and <ul> for ordered and unordered lists, <table> for tables as well as <main>,<div>,<header>,<section>,<nav>,<article>,<aside>,<summary> and <footer> to both explicitly and implicitly describe the layout of an HTML document. In fact, "HTML" itself is an acronym (HyperText Markup Language) in which the "Markup" describes the function of HTML to "mark up" text in a similar way that editors once did in the print industry, describing which parts of the text should be bold, italicized, etc. or divided up and in what way.
HTML describes the structure of a document, not really the layout.
If HTML had <inline> <block> <column> <row> or <grid> tags, sure. But CSS determines the layout via display/position properties.
<span> is inline
<div> is block
<table>,<tr> and <td> are your grid, row and column.
CSS improves on describing layout with positioning but HTML was still doing that before CSS even came along.
Thanks for the downvote, but you're wrong.
> explicitly and implicitly describe the layout of an HTML document.
No, this doesn't happen.
> In fact, "HTML" itself is an acronym (HyperText Markup Language)
Duh.
> in which the "Markup" describes the function of HTML to "mark up" text in a similar way that editors once did in the print industry, describing which parts of the text should be bold, italicized, etc. or divided up and in what way.
Which has fuck-all to do with the layout.
I didn't downvote you, and I'm not wrong. And all you're responding with is invective. Go touch grass and read a book. Bye.