TableHeader — Loidolt Theme

import { TableHeader } from '@loidolt/theme-svelte';

Example

Sort states
	Plain	Right-aligned
Press the first header	Not a control	128

Notes

aria-sort sits on the cell, where the spec puts it, while the press target is a real button inside it.
Exactly one column should report a sort; leave every other at none.

Props

Generated from the component source, so it cannot drift from the implementation.

TableHeader props
Prop	Type	Default	Notes
`children` required	`Snippet`	`—`
`align`	`ColumnAlign`	`—`
`class`	`string`	`—`
`onSort`	`(direction: SortDirection) => void`	`—`	Makes the header a sort control. Called with the direction a press asks for: `ascending` for an unsorted or descending column, `descending` for an ascending one.
`ref` bindable	`HTMLTableCellElement \| null`	`null`
`sort`	`SortDirection`	`'none'`	Current sort state of this column. Drives `aria-sort` and the indicator; leave at `none` for every column that is not the sorted one, so screen readers report a single sort.
`sortLabel`	`string`	`—`	Accessible name of the sort button when the header's own text is not enough.

Plus the attributes of Omit<HTMLThAttributes, 'children' | 'align'>, forwarded to the root element.