DataTable

28 October 2026

Added

• First version: DataTable, built on TanStack Table v9; it uses the Table parts and tableStyles. createDataTableColumnHelper and DataTable.ColumnToggle are exported.
• Sorting (sorting, defaultSorting, manualSorting): a button in the header, aria-sort on the th, a direction icon and a polite live region announcement.
• Selection (selectionMode, rowSelection): a select-all checkbox with a mixed state; row checkboxes are named through getRowLabel.
• Column visibility and the column panel (columnToggle).
• Built-in states (status): loading (skeleton, aria-busy), empty, filtered-empty and error; onClearFilters, onRetry and messages.
• rowActions, onRowOpen, footer, toolbar and totalRowCount.
• virtualize: visible rows with TanStack Virtual, aria-rowcount and aria-rowindex.
• ui.data-table.* library strings (TR and EN).
• Pinned columns: meta.pin (start, end) in a column definition.
• Expandable rows: renderExpanded, getRowCanExpand, expanded, defaultExpanded, onExpandedChange; the ui.data-table.expand and ui.data-table.expand-column strings.

Changed

• The same header and row heights as Table; the default virtualisation row height is 32, 40 and 48 px.
• Pinned header cells take the page surface fill, so scrolling columns do not show under them; the pinned column edge takes the table rule colour (table-border).
• The expand button’s focus is a solid 2 px outline; the expanded detail row sits on surface-layer-1.
• The column panel uses the shared popup surface (border-overlay, shadow-popup, 10 px corners).