components/table/table.ts

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1// The table's behaviour: a sort button in a column header sorts the body rows by that
2// column, toggling ascending and descending, and moves aria-sort to its header cell. Screen
3// readers announce aria-sort themselves, so nothing else is announced. No framework.
4
5export type SortDirection = "ascending" | "descending";
6
7const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
8
9// The value a cell sorts by: its data-sort attribute when it has one (a timestamp, a raw
10// count), else its text. A plain number, with or without thousands separators, sorts as a
11// number.
12export function sortValue(cell: Element | undefined): string | number {
13  const raw = (cell?.getAttribute("data-sort") ?? cell?.textContent ?? "").trim();
14  if (/^-?\d[\d,]*(\.\d+)?$/.test(raw)) return Number(raw.replaceAll(",", ""));
15  return raw;
16}
17
18export function compareValues(a: string | number, b: string | number): number {
19  if (typeof a === "number" && typeof b === "number") return a - b;
20  // Text, and a number against text, compare as text with digits read as numbers. An
21  // empty cell sorts first ascending; give it a data-sort to place it elsewhere.
22  return collator.compare(String(a), String(b));
23}
24
25// Sorts every tbody's rows of `table` by column `index`. Stable: equal rows keep their order.
26export function sortRows(table: HTMLTableElement, index: number, direction: SortDirection): void {
27  const sign = direction === "ascending" ? 1 : -1;
28  for (const body of Array.from(table.tBodies)) {
29    const rows = Array.from(body.rows);
30    const keyed = rows.map((row) => ({ row, key: sortValue(row.cells[index]) }));
31    keyed.sort((x, y) => sign * compareValues(x.key, y.key));
32    body.append(...keyed.map((k) => k.row));
33  }
34}
35
36// The column a header cell heads, counting the colspans before it.
37export function columnIndex(th: HTMLTableCellElement): number {
38  let i = 0;
39  for (let c = th.previousElementSibling; c; c = c.previousElementSibling) i += (c as HTMLTableCellElement).colSpan || 1;
40  return i;
41}
42
43// Sorts by the column of `th`: ascending first, then toggling. Only one header carries
44// aria-sort at a time (APG sortable table). Returns the new direction.
45export function sortByHeader(th: HTMLTableCellElement, direction?: SortDirection): SortDirection {
46  const table = th.closest("table");
47  const next: SortDirection = direction ?? (th.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending");
48  if (!table) return next;
49  for (const other of Array.from(table.querySelectorAll("thead th[aria-sort]"))) if (other !== th) other.removeAttribute("aria-sort");
50  th.setAttribute("aria-sort", next);
51  sortRows(table, columnIndex(th), next);
52  return next;
53}
54
55// Attaches to every [data-cap="table"] under root that is not attached yet. Returns a
56// function that detaches them all. A table already marked sorted (aria-sort in its
57// markup) is expected to arrive in that order; it is not re-sorted on attach.
58export function enhance(root: ParentNode = document): () => void {
59  const undo: Array<() => void> = [];
60  for (const wrap of Array.from(root.querySelectorAll<HTMLElement>("[data-cap='table']:not([data-cap-ready])"))) {
61    wrap.dataset.capReady = "";
62    const onClick = (e: MouseEvent) => {
63      const button = (e.target as Element).closest<HTMLButtonElement>(".cap-table-sort");
64      const th = button?.closest<HTMLTableCellElement>("th");
65      if (button && th && wrap.contains(th)) sortByHeader(th);
66    };
67    wrap.addEventListener("click", onClick);
68    undo.push(() => {
69      wrap.removeEventListener("click", onClick);
70      delete wrap.dataset.capReady;
71    });
72  }
73  return () => undo.forEach((f) => f());
74}