Table

let selection = new SelectionModel({ mode: "multiple", keys, selectedKeys: ["INV-2039"] });
selection.addEventListener("change", () => void handle.update());

// The headers link, so the order is whatever the query asks for. An app would serve
// the page back sorted; a page that is its own server writes the query and re-reads it.
let sort = readSort(globalThis.location?.search ?? "");

function sortFromHeader(event) {
	let link = event.target.closest('th[aria-sort] a');
	if (!link) return;

	event.preventDefault();
	globalThis.history.pushState(null, "", link.href);
	sort = readSort(globalThis.location.search);
	void handle.update();
}

// Only the active column carries a direction; the rest show the idle indicator.
let direction = (key) => (sort.key === key ? sort.direction : undefined);

<div mix={[on("click", sortFromHeader)]}>
	<Table.Container>
		<Table aria-label="Invoices">
			<Table.Header>
				<Table.Row>
					<Table.Column>
						<Checkbox
							aria-label="Select every invoice"
							checked={selection.isAll}
							mix={[on<HTMLInputElement, "change">("change", toggleAll)]}
						/>
					</Table.Column>
					<Table.Column href={sortHref("id", sort)} sortDirection={direction("id")}>
						Invoice
					</Table.Column>
					<Table.Column href={sortHref("customer", sort)} sortDirection={direction("customer")}>
						Customer
					</Table.Column>
					<Table.Column href={sortHref("issued", sort)} sortDirection={direction("issued")}>
						Issued
					</Table.Column>
					<Table.Column>Status</Table.Column>
					<Table.Column align="end" href={sortHref("total", sort)} sortDirection={direction("total")}>
						Total
					</Table.Column>
				</Table.Row>
			</Table.Header>
			<Table.Body>
				{sortInvoices(invoices, sort).map((invoice) => (
					<Table.Row
						key={invoice.id}
						aria-selected={selection.isSelected(invoice.id) ? "true" : undefined}
					>
						<Table.Cell>
							<Checkbox
								aria-label={`Select ${invoice.id}`}
								checked={selection.isSelected(invoice.id)}
								mix={[
									on<HTMLInputElement, "change">("change", () => selection.toggle(invoice.id)),
								]}
							/>
						</Table.Cell>
						<Table.Cell>{invoice.id}</Table.Cell>
						<Table.Cell>{invoice.customer}</Table.Cell>
						<Table.Cell>{invoice.issuedLabel}</Table.Cell>
						<Table.Cell>
							<Badge color={statusColors[invoice.status]} variant="secondary">
								{invoice.status}
							</Badge>
						</Table.Cell>
						<Table.Cell>{invoice.totalLabel}</Table.Cell>
					</Table.Row>
				))}
				<Table.LoadMore href="?page=2" colSpan={6}>
					Load the next 25 invoices
				</Table.LoadMore>
			</Table.Body>
		</Table>
	</Table.Container>
	<div mix={[hstack({ gap: 2, align: "center", justify: "end" })]}>
		<Text>
			{selection.size} of {invoices.length} selected
		</Text>
	</div>
</div>