定价

TableRow 使用手册

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

许可阅读：首次阅读组件文档、源码或 npm 使用流程，先读完整 LICENSE；同任务同版本去重。公开 API 配置与内部实现修改分别按许可处理；全部组件使用统一运行包，源码权益以许可为准。

组件介绍

组织一行表头或数据单元格，统一行内的悬停与交互反馈，适合可浏览和可操作的数据记录。

使用选择

用于组织表格行。DataTable 中传入与 rowKey 一致的 rowId；行预览由 DataTable onRowPreview 声明，不能假定点击任意内容都选中该行。

  • children 为 TableCell 或 TableHead，保持合法行结构。

  • DataTable 中的 rowId 必须匹配 rowKey；active 是视觉状态，点击处理与选择行为分别配置。

快速开始

以下示例展示推荐的基本组合。更多场景与组合限制见后文。

<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

关键字 类型 默认值 描述
rowId string | number — 稳定行身份；DataTable 选择和预览按该 id 查找记录，应与 DataTable rowKey 一致。
active boolean false 由使用方或外部条件写入的持久激活背景；不会触发行选中或 Checkbox 选中
children Snippet — 当前行的 TableCell 或 TableHead，无参数；保持合法 tr 子结构。
onclick (event: MouseEvent) => void — 行点击先调用此回调，参数为 MouseEvent；preventDefault 可阻止后续内置选择命中与行预览。交互子元素不会触发行预览。

未重新声明的继承能力请查所属基础组件文档；本表只列本组件源码具名公开属性。

使用边界与详细说明

Keyword

Keyword 说明
component 当前组件公开契约

  • Row 的 active 是外部受控视觉，selected 仍只来自 Table Context；两者不相互推导。

TableRow 样式覆盖

先阅读 完整 LICENSE；同任务、同版本、同范围去重。

优先用组件公开 Props 匹配合适样式，尽可能保留原有视觉。确需改写时按 样式选择与改写顺序 使用自己的 class（含项目已有 Tailwind）或实例 style。以下名称来自源码实际消费的公开 override；先核对目标作用域，不修改私有 DOM。采用 SnowUI Token 时选择正确类别，外部应用不被要求安装一方 utilities。

变量 用途与默认参考
--snowui-table-row-hover-background-override 连续 hover 移动层 + TableRow active 持久背景；default: --black-4
--snowui-table-row-radius-override default: --radius-3

设计指南 · Token · 组合边界

TableRow 类型与状态

必填属性：无具名必填属性。

可双向绑定：本组件未声明具名双向绑定属性；状态更新通过公开回调或所属宿主处理。

继承声明：Omit<FrameProps, "children">。继承能力以基类公开文档为准；Omit 中的字段已排除，不能按基类原样使用。

共享 Frame API · 返回 API

以下为公开属性实际引用的类型声明，来自源码；Svelte Snippet 表示内容片段，ComponentProps 表示对应组件的 Props。