Data table

In a real table a screen reader announces "column 3 of 6, Publisher, Brisbane City". In a grid of divs it announces "Brisbane City", and there is no way to navigate by column at all. The proportional widths come from GdColumn.flex and are applied to a <colgroup>, which keeps the layout without giving up the semantics.

• The row is the link — never a trailing "view" button. Selection rides the 16px checkbox column, whose clicks do not fire the row; the header box selects the page and goes indeterminate at "some".
• Sort is state, not behaviour. A sortable header is a real button carrying aria-sort, and clicking updates v-model:sort — the table never reorders the rows itself, because the rows are usually one page of a server's answer, and sorting the page you can see lies about the rest.

Machine facts are monospaced and tabular; human sentences are not. mono: true on a column is what says which is which, and data-gd-numeric stops a column of figures jittering as it updates.

Past seven pages it window-elides rather than rendering forty numbers, and the elision is a static "…" rather than a control: a clickable ellipsis that jumps an arbitrary distance is a worse affordance than the arrows beside it.