HyTableRow

Usage examples on this page are written for Lit / plain HTML (<hy-table-row>). The same component ships as HyTableRow 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 row of a table written as markup (hy-table without columns): its cells are hy-table-cell elements, in column order. A row with slot="header" is the table's header row and its cells are column headers; every other row is a body row, in the order written — sorting is the app's, as with the data table.

The table around the row decides its look: the stripe on every other body row (striped), the fill under the pointer (hoverable), the line under the last row. The row carries the row role on its host.

Examples

A header row and a body row

<hy-table label="Messages">
  <hy-table-row slot="header">
    <hy-table-cell>Type</hy-table-cell>
    <hy-table-cell>Title</hy-table-cell>
  </hy-table-row>
  <hy-table-row>
    <hy-table-cell>first use</hy-table-cell>
    <hy-table-cell>No projects yet</hy-table-cell>
  </hy-table-row>
</hy-table>

API

Slots

Slot	Description
default	The row's hy-table-cell elements, in column order.

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-row-background-neutral-hover	—	Fill of a body row under the pointer (transparent when the table is not hoverable).
--hy-table-row-background-surface-subtle	—	Fill of every other body row (transparent unless the table is striped).
--hy-table-row-stroke-none	—	Width of the line under the last row (none).
--hy-table-row-motion-transition-hover-duration	—	Duration of the hover fill's change.
--hy-table-row-motion-transition-hover-easing	—	Easing of the hover fill's change.