TableRow handbook

v1.10.0 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Organize a row of header or data cells with consistent hover and interaction feedback, suitable for browsable and actionable records.

When to use it

Organize a table row. In DataTable, pass a rowId that matches rowKey. Declare row preview through DataTable onRowPreview; do not assume clicking any content selects the row.

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

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { TableRow, Chip, Table, TableHeader, TableHead, TableBody, TableCell, Button } from '@snowui-design-system/components';</script> <Table ariaLabel="Component review queue" minWidth={540}>	<TableHeader><TableRow><TableHead columnId="component">Component</TableHead><TableHead columnId="owner">Owner</TableHead><TableHead columnId="status">Status</TableHead></TableRow></TableHeader>	<TableBody>		<TableRow rowId="data-table"><TableCell columnId="component">DataTable</TableCell><TableCell columnId="owner">Site team</TableCell><TableCell columnId="status"><Chip variant="background" style="color: var(--secondary-indigo);">In review</Chip></TableCell></TableRow>		<TableRow rowId="pagination"><TableCell columnId="component">Pagination</TableCell><TableCell columnId="owner">Components team</TableCell><TableCell columnId="status"><Chip variant="background" style="color: var(--secondary-indigo);">Queued</Chip></TableCell></TableRow>	</TableBody></Table>

API

Keyword	Type	Default	Description
rowId	`string \| number`	—	Stable row identity. DataTable selection and preview find the record by this ID, which should match DataTable rowKey.
active	`boolean`	`false`	Persistent active background set by the consumer or an external condition. It does not select the row or its Checkbox.
children	`Snippet`	—	TableCell or TableHead content for the current row, with no arguments. Preserve a valid `tr` child structure.
onclick	`(event: MouseEvent) => void`	—	Called first on row click with MouseEvent. preventDefault can stop subsequent built-in selection hits and row preview. Interactive descendants do not trigger row preview.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Keyword

Keyword	Description
component	Current public component contract

Row active is an externally controlled visual state; selected comes only from Table Context. Neither state implies the other.

TableRow style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

Variable	Purpose and default reference
`--snowui-table-row-hover-background-override`	Moving hover layer plus a persistent TableRow active background; default: --black-4
`--snowui-table-row-radius-override`	default: --radius-3

Design guide · Tokens · Composition boundaries

TableRow types and state

Required Props: no named required Props.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inheritance: Omit<FrameProps, "children">. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.