定价

Table

Figma 源代码

以语义化表格展示结构化数据，支持自适应列宽、局部横向滚动与加载状态，可自由组合表头和单元格。

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

如何使用

用于纯展示结构化数据，并组合 TableHeader、TableBody、TableRow、TableHead、TableCell。出现搜索、排序、勾选、操作列或分页时由 DataTable 协调，不在普通 Table 外复制数据管理行为。

  • 通过 TableHeader / TableBody / TableRow 等保持合法表格层级。

  • columnWidths 保存列宽，columnId 对齐同一列；数据查询、选择、分页交给 DataTable。

导入

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

用法

列宽

加载中

API 参考

属性 类型 默认值 示例 描述
columnWidths Record<string, number> {} columnWidths={columnWidthsOptions} 受控列宽，可 bind:
horizontalScroll boolean — horizontalScroll 默认保留全部列并横向滚动；false 时先从右向左隐藏可隐藏列，保留列仍超宽时滚动兜底。
roleLayout TableRoleLayout — roleLayout={value} auto 根据空间在常驻 column 和 hover overlay 之间切换；显式 column / overlay 固定布局。
minWidth number | string — minWidth="Example" 显式扩大表格最小宽度；未设置时由各列 min-content + Cell padding 自动汇总，溢出由 Table 内置局部横向 viewport 承接
ariaLabel string — ariaLabel="Example" 表格的业务可访问名称，保持调用方原文；横向滚动区域会按当前 LocaleProvider 在该名称后补充“可横向滚动”，未提供时使用本地化的通用名称。
loadingSpinnerSize ResourceSize 16 loadingSpinnerSize={value} 已有数据继续加载时，表体末尾居中 Spinner 的尺寸
onColumnWidthsChange (widths: Record<string, number>) => void — onColumnWidthsChange={(value) => { /* handle value */ }} 拖动列宽后的完整快照
children Snippet — <Table>Content</Table> 语义表格内容，无参数；组合 TableHeader / TableBody，数据管理由外层 DataTable 提供。