Mushilu-San UI Table
A data table with column headers, optional sorting and a sticky header.
Selector: mui-table
import { Table } from '@mushilu-san/ui/data-display';Loading example…
Overview
<table> from columns and rows. Columns marked sortable get a sort button in the header, and sortChange emits the new key and direction.
scope="col", and the sorted column carries aria-sort. Set caption to name the table for screen readers.
When to use
Records with the same fields that users compare or sort. Data with more than a few columns, where a list would be hard to scan.
When not to use
Layout of unrelated content. Use a Grid or a Stack. Use Grid instead.A short list of single values. Use a list of text.
Guidelines
Do
Give the table a caption that says what it lists. Right-align numbers so they compare easily.
Don't
Do not use a table for layout. Do not sort on a column the user cannot see the meaning of.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | region | |
header cell | columnheader (native) | scope="col". aria-sort on the sorted column. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace |
Keep the header row meaningful when read out, and avoid merged cells, which screen readers handle poorly.
API
Table
| Name | Type | Default | Description |
|---|---|---|---|
columns | TableColumn[] | — | Column definitions. |
rows | readonly Record<string, unknown>[] | — | Row data — each row is a plain record keyed by column key. |
caption | string | undefined | — | Visible caption; also provides the region's accessible name. |
stickyHeader | boolean | false | Pin the header row when the table scrolls. Accepts attribute presence, e.g. <… stickyHeader>. |
| Name | Type | Description |
|---|---|---|
sortChange | SortState | Emitted whenever the user clicks a sortable column header. |
CSS parts
::part(caption)::part(root)::part(scroll)::part(sort-btn)::part(sort-icon)::part(table)::part(tbody)::part(td)::part(th)::part(thead)::part(tr)
Tokens
--mui-color-surface--mui-color-border--mui-color-text-muted--mui-color-focus-ring--mui-font-size-sm