Sortable table with sticky header

<div class="max-h-72 overflow-auto rounded-xl border border-slate-200">
  <table id="orders" class="w-full text-left text-sm">
    <thead>
      <tr>
        <th scope="col" aria-sort="none" class="sticky top-0 bg-slate-50 px-4 py-3">
          <button type="button" class="font-semibold text-slate-700">Customer</button></th>
        <th scope="col" aria-sort="none" class="sticky top-0 bg-slate-50 px-4 py-3">
          <button type="button" class="font-semibold text-slate-700">Total</button></th>
        <th scope="col" aria-sort="none" class="sticky top-0 bg-slate-50 px-4 py-3">
          <button type="button" class="font-semibold text-slate-700">Date</button></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100 bg-white">
      <tr><td class="px-4 py-3">Northwind</td><td class="px-4 py-3" data-sort="1250">$1,250</td><td class="px-4 py-3" data-sort="2026-03-02">2 Mar</td></tr>
      <tr><td class="px-4 py-3">Acme</td><td class="px-4 py-3" data-sort="90">$90</td><td class="px-4 py-3" data-sort="2026-01-15">15 Jan</td></tr>
      <tr><td class="px-4 py-3">Globex</td><td class="px-4 py-3" data-sort="4300">$4,300</td><td class="px-4 py-3" data-sort="2026-02-20">20 Feb</td></tr>
      <tr><td class="px-4 py-3">Initech</td><td class="px-4 py-3" data-sort="610">$610</td><td class="px-4 py-3" data-sort="2026-03-28">28 Mar</td></tr>
    </tbody>
  </table>
</div>

// Click a header button to sort; updates aria-sort for assistive tech.
const table = document.getElementById('orders');
const body = table.tBodies[0];
const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });

table.tHead.addEventListener('click', (e) => {
  const th = e.target.closest('th');
  if (!th || !e.target.closest('button')) return;

  const col = th.cellIndex;
  const dir = th.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
  table.querySelectorAll('th').forEach((h) => h.setAttribute('aria-sort', 'none'));
  th.setAttribute('aria-sort', dir);

  const key = (row) => {
    const cell = row.cells[col];
    return cell.dataset.sort ?? cell.textContent.trim();
  };
  const rows = [...body.rows].sort((a, b) => collator.compare(key(a), key(b)));
  if (dir === 'descending') rows.reverse();
  body.append(...rows); // moves the existing nodes, no rebuild
});