定价

TableRow

Figma 源代码

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

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

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

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

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

导入

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

用法

激活状态

API 参考

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