HyTableCell

Usage examples on this page are written for Lit / plain HTML (<hy-table-cell>). The same component ships as HyTableCell in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

Used inside <hy-table> — it only means something as part of it.

One cell of a table written as markup (hy-table without columns). It holds anything — text, a badge, a field, a button — and the table around it decides its look: padding, the lines between rows and cells, the header band, the type.

A cell in a header row (hy-table-row slot="header") is a column header: it takes the header's type and band and the columnheader role; any other cell is a cell. The role is set on the host, so the table, its rows and its cells read as one table to assistive technology.

Inside a table the table's own settings govern the cell (its dividers, emphasis, sticky-header and its design-system values): the table sets the cell's hooks, as hy-toggle-group sets its toggles'.

Accessibility: your part

• Give a control in a cell an accessible name that says which row it acts on.

Examples

A cell holding a field

<hy-table-cell>
  <hy-text-input size="small" aria-label="Title, first row" value="No projects yet"></hy-text-input>
</hy-table-cell>

API

Properties

Property	Attribute	Type	Default	Description
align	align	'start' | 'center' | 'end'	'start'	Horizontal alignment of the content.
verticalAlign	vertical-align	'top' | 'middle'	—	Vertical alignment of the content, for this cell alone. Unset, the cell follows the table's vertical-align.
width	width	string	''	Column width, as a CSS length, on a header cell (as a data table's column width).

Slots

Slot	Description
default	The cell's content: text, in the cell's own type (the table's body text, the header style in a header row), or components.

CSS Custom Properties

The documented hooks. Every override hook the component reads — one per token it paints — is listed in @whitespaceux/harmony/theme-api.json, and @whitespaceux/harmony/component-bindings.json (the Harmony MCP get-bindings tool) says which part and state each one paints.

Property	Default	Description
--hy-table-cell-border-subtle-rest	—	Color of the lines between rows and cells.
--hy-table-cell-stroke-sm	—	Width of the line under a row.
--hy-table-cell-header-stroke-sm	—	Width of the line under the header row (the row line unless the table sets it).
--hy-table-cell-column-stroke-none	—	Width of the line between cells (none unless the table shows cell dividers).
--hy-table-cell-padding-layout-md	—	Inline padding.
--hy-table-cell-padding-layout-sm	—	Block padding.
--hy-table-cell-foreground-default-rest	—	Text color of a body cell.
--hy-table-cell-header-foreground-default-rest	—	Text color of a header cell.
--hy-table-cell-header-background-surface-medium	—	Fill of a header cell.
--hy-table-cell-header-text-transform	—	Case of a header cell (none unless set). Display only — the text stays as written.
--hy-table-cell-header-label-lg-font-family	—	Font family of a header cell.
--hy-table-cell-header-label-lg-font-size	—	Font size of a header cell.
--hy-table-cell-header-label-lg-font-weight	—	Font weight of a header cell.
--hy-table-cell-header-label-lg-letter-spacing	—	Letter spacing of a header cell.
--hy-table-cell-header-label-lg-line-height	—	Line height of a header cell.
--hy-table-cell-vertical-align	—	Vertical alignment of the content (middle unless the table sets vertical-align).
--hy-table-cell-header-position	—	sticky keeps the header cells at the top while the table scrolls (static unless the table sets sticky-header).