TableRow

Group header or data cells into one row with consistent hover and interaction feedback.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use TableRow to organize table cells. In DataTable, pass a rowId that matches rowKey. Declare row previews with DataTable onRowPreview; clicking arbitrary row content does not automatically select the row.

Use TableCell or TableHead children to keep a valid table row structure.
In DataTable, rowId must match rowKey. active is visual state; configure click handling and selection behavior separately.

Import

import { TableRow } from '@snowui-design-system/components';

Usage

Active

API Reference

Property	Type	Default	Example	Description
`rowId`	`string \| number`	`—`	`rowId="Example"`	Stable row identity. DataTable uses this id to find the record for selection and preview; it should match DataTable rowKey.
`active`	`boolean`	`false`	`active`	Persistent active background set by the consumer or an external condition. Does not select the row or its Checkbox.
`children`	`Snippet`	`—`	`<TableRow>Content</TableRow>`	TableCell or TableHead children for this row, with no parameters. Preserve valid tr children.
`onclick`	`(event: MouseEvent) => void`	`—`	`onclick={(value) => { /* handle value */ }}`	Called before built-in selection hit testing and row preview, with a MouseEvent. preventDefault blocks those later actions. Interactive child elements do not trigger row preview.