组件 · 数据展示
Table 表格
组合式 Table 的公开根组件，保留独立于旧 Table2 入口的测试标记。
引入
import { Table } from '@selrux/ui/table';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
| 姓名 | 部门 |
|---|---|
| 用户 A | 研发 |
| 用户 B | 设计 |
代码演示
基础用法
HeroUI Table 的容器、列、行与单元格组合。
| 姓名 | 角色 | 状态 |
|---|---|---|
| 张三 | 设计师 | 在职 |
| 李四 | 工程师 | 在职 |
| 王五 | 产品经理 | 休假 |
次级外观
独立圆角表头与透明表体。
| 姓名 | 角色 |
|---|---|
| 张三 | 设计师 |
列显示隐藏
同一份可见列同时生成表头与单元格，至少保留一列。
| 姓名 | 角色 | 邮箱 | 状态 |
|---|---|---|---|
| 张三 | 设计师 | zhang@example.com | 在职 |
| 李四 | 工程师 | li@example.com | 在职 |
| 王五 | 产品经理 | wang@example.com | 休假 |
无表头示例
明确列数以保持多列空态的跨度，并显式标记行标题。
| 张三 | 设计师 |
|---|---|
| 李四 | 工程师 |
外部分页
高亮页码表示当前页，摘要只保留总条数以让出页码空间。
| 姓名 |
|---|
| 张三 |
| 李四 |
列宽调整
本地 Headless 的 ResizableContainer 与 ColumnResizer 协作。
| 姓名 | 角色 | 邮箱 |
|---|---|---|
| 张三 | 设计师 | zhang@example.com |
行选择
选择集合由页面受控，动态行随集合变化刷新 Checkbox。
| 姓名 | 角色 | |
|---|---|---|
| 张三 | 设计师 | |
| 李四 | 工程师 | |
| 王五 | 产品经理 |
单选
点击行或聚焦后按空格切换选择，再次选择当前行可清空。
| 成员 | 角色 |
|---|---|
| 成员 001 | 设计 |
| 成员 002 | 研发 |
| 成员 003 | 产品 |
受控排序
本地 Headless 提供排序事件，数据顺序由消费方负责。
| 姓名 | 角色 |
|---|---|
| 李四 | 工程师 |
| 王五 | 产品经理 |
| 张三 | 设计师 |
空态
Table 表体的空集合由本库 Empty 提供反馈。
| 姓名 | 角色 |
|---|---|
暂无成员 添加成员后会显示在这里。 |
加载态
异步数据加载时显示本库 Spinner。
| 姓名 |
|---|
| 正在加载成员 |
大数据量示例
20,000 条记录只挂载视口附近的固定行高表格行。
| 姓名 | 部门 | 邮箱 |
|---|---|---|
| 成员 00001 | 研发 | member1@example.com |
| 成员 00002 | 设计 | member2@example.com |
| 成员 00003 | 运营 | member3@example.com |
| 成员 00004 | 产品 | member4@example.com |
| 成员 00005 | 研发 | member5@example.com |
| 成员 00006 | 设计 | member6@example.com |
| 成员 00007 | 运营 | member7@example.com |
| 成员 00008 | 产品 | member8@example.com |
| 成员 00009 | 研发 | member9@example.com |
| 成员 00010 | 设计 | member10@example.com |
| 成员 00011 | 运营 | member11@example.com |
| 成员 00012 | 产品 | member12@example.com |
| 成员 00013 | 研发 | member13@example.com |
| 成员 00014 | 设计 | member14@example.com |
API
属性覆盖：示例用到 1 / 1 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Table
组合式 Table 的公开根组件，保留独立于旧 Table2 入口的测试标记。
静态成员：Table.Root Table.ScrollContainer Table.Content Table.Header Table.Column Table.Body Table.VirtualBody Table.Row Table.Cell Table.Footer Table.Collection Table.ResizableContainer Table.ColumnResizer Table.LoadMore Table.LoadMoreContent Table.SortableColumnHeader
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
variant | HeroUI Table 的两种表面外观。 | "primary" | "secondary" | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：TableRootProps、TableSortableColumnHeaderProps