Table sort

data-sort since 0.1.0

data-sort on a table makes every column head with text a sort button. Click once to sort up, again to sort down; the rows slide to their new places so a row can be followed.

Basic

Commits this week
Repository	Message	Commits	Last push
atlas	Cap the retry budget at four attempts	18	Today 08:41
ledger	Tag 2.4 and write the release note	6	Wed 15:04
hummingbird	Revert the queue change that broke the tests	11	Wed 18:26

html

<table data-sort>
  <caption>Commits this week</caption>
  <thead><tr><th>Repository</th><th>Message</th><th>Commits</th><th>Last push</th><th data-sort="none">Open</th></tr></thead>
  <tbody>
    <tr><td>atlas</td><td>Cap the retry budget at four attempts</td><td data-value="18">18</td><td><time datetime="2026-10-02T08:41">Today 08:41</time></td><td><button data-size="sm">Open</button></td></tr>
    <tr><td>ledger</td><td>Tag 2.4 and write the release note</td><td data-value="6">6</td><td><time datetime="2026-09-30T15:04">Wed 15:04</time></td><td><button data-size="sm">Open</button></td></tr>
    <tr><td>hummingbird</td><td>Revert the queue change that broke the tests</td><td data-value="11">11</td><td><time datetime="2026-09-30T18:26">Wed 18:26</time></td><td><button data-size="sm">Open</button></td></tr>
  </tbody>
</table>

th[data-sort="none"] opts the actions column out, and a head with no text is skipped anyway.

Notes

s72.js puts a <button> inside each sortable head and sets aria-sort on the one in use, which is what the arrow follows.
The order of preference is td[data-value], then <time datetime>, then the cell's own text read as a number, then as text.
Rows slide over 250 ms with a FLIP animation; under prefers-reduced-motion: reduce they jump.
Only the last row of <thead> becomes buttons, so a two-row head with a group label still works.
Under 560px the table scrolls sideways inside its own frame, so a head button can sit out of sight until you scroll to it.