Table
表格：列定义驱动渲染，三态排序(升/降/无)、客户端分页、行选择(含半选 indeterminate)；sortState / rowSelection.selectedRowKeys / pagination.current 受控不回写，仅经 onSortChange / onChange 通知。复用 @chenzy-design/core 纯函数算法与 Pagination 组件。支持行展开 expandable（受控/非受控）。固定列 fixed、列筛选 filters/onFilter、列宽拖拽 resizable（本地覆盖宽度不写回 columns）。树形数据 tree（行含 children 自动嵌套，第一列展开三角+缩进，排序/分页作用于顶层行，扁平化用 core flattenTreeRows 纯函数，受控展开 keys 不回写）。树形行选择父子联动 rowSelection.checkStrictly（默认 false 勾父连带后代+半选，true 父子独立；联动用 core conductRows/toggleRowCheck 纯函数）。行虚拟滚动 virtualized：仅渲染视口内行切片（复用 core fixedRange），首尾 padding spacer tr 撑总高，保持原生 table 语义；thead sticky 固定顶部；与 pagination 互斥（虚拟时忽略分页）。
如何引入
import { Table } from '@chenzy-design/svelte';基础用法
带排序、行选择、斑马纹的基础表格。
| 城市 | |||
|---|---|---|---|
| 陈一 | 32 | 杭州 | |
| 林二 | 28 | 上海 | |
| 王三 | 45 | 北京 | |
| 赵四 | 23 | 深圳 | |
| 孙五 | 38 | 广州 |
自定义渲染
列 render 组合 Avatar / Tag / Button 等富内容。
| 标题 | 大小 | 交付状态 | 所有者 | 更新日期 | |
|---|---|---|---|---|---|
| S Semi Design 设计稿.fig | 2M | 已交付 | 姜 姜鹏志 | 2020-02-02 | |
| S Semi Design 演示文稿 | 2M | 已延期 | 郝 郝宣 | 2020-01-17 | |
| S 设计文档 | 34KB | 待评审 | Z Zoey | 2020-01-26 | |
| S D2C 设计文档 | 34KB | 已交付 | 姜 姜琪 | 2020-01-26 |
行选择操作
受控复选行选择，所有者行禁用复选框。
| 成员 | 角色 | |
|---|---|---|
| 陈一 | 管理员 | |
| 林二 | 编辑 | |
| 王三 | 所有者 | |
| 赵四 | 访客 |
带分页组件的表格
客户端分页 + 列排序，受控当前页。
| 选手 | |
|---|---|
| 选手 1 | 60 |
| 选手 2 | 97 |
| 选手 3 | 94 |
| 选手 4 | 91 |
| 选手 5 | 88 |
| 选手 6 | 85 |
| 选手 7 | 82 |
| 选手 8 | 79 |
拉取远程数据
loading + 异步分页，受控 current 由回调驱动。
| 标题 | 大小 | 所有者 |
|---|---|---|
| 暂无数据 | ||
固定列或表头
左右固定列、横向滚动，状态列 Tag 自定义渲染。
| 姓名 | 邮箱 | 电话 | 状态 |
|---|---|---|---|
| 陈一 | chen@example.com | 138-0000-0001 | 已激活 |
| 林二 | lin@example.com | 138-0000-0002 | 待接受 |
| 王三 | wang@example.com | 138-0000-0003 | 已停用 |
| 赵四 | zhao@example.com | 138-0000-0004 | 已激活 |
带排序和过滤功能的表头
列头三态排序，部门列漏斗多选筛选。
| 姓名 | 部门 | |
|---|---|---|
| 赵四 | 23 | 市场 |
| 林二 | 28 | 设计 |
| 周六 | 30 | 市场 |
| 陈一 | 32 | 工程 |
| 孙五 | 38 | 设计 |
| 王三 | 45 | 工程 |
排序与筛选并存
同一列同时开启 sorter 与 filters。
| 所有者 | ||
|---|---|---|
| S Semi Design 设计稿0.fig | 0 KB | 姜 姜鹏志 |
| S Semi D2C 设计稿1.fig | 37 KB | 郝 郝宣 |
| S Semi Design 设计稿2.fig | 74 KB | 姜 姜鹏志 |
| S Semi D2C 设计稿3.fig | 111 KB | 郝 郝宣 |
| S Semi Design 设计稿4.fig | 148 KB | 姜 姜鹏志 |
| S Semi D2C 设计稿5.fig | 185 KB | 郝 郝宣 |
自定义表头筛选
单选筛选（filterMultiple:false）。
| 标题 | 交付状态 | 所有者 | |
|---|---|---|---|
| Semi Design 设计稿.fig | 128 KB | 已交付 | 姜鹏志 |
| Semi D2C 首页.fig | 64 KB | 待评审 | 郝宣 |
| Semi Design 组件库.fig | 199 KB | 已交付 | 姜鹏志 |
| Semi D2C 详情页.fig | 32 KB | 待评审 | 郝宣 |
| Semi Design 图标集.fig | 88 KB | 已交付 | 姜鹏志 |
筛选确认模式
filterConfirmMode=confirm，点确定才生效。
| 标题 | 所有者 | |
|---|---|---|
| Semi Design 设计稿1.fig | 128 KB | 姜鹏志 |
| Semi Pro 首页1.fig | 64 KB | 郝宣 |
| Semi Design 设计稿2.fig | 199 KB | 姜鹏志 |
| Semi Pro 首页2.fig | 32 KB | 郝宣 |
| Semi Design 设计稿3.fig | 88 KB | 姜鹏志 |
可以展开的表格
expandable.expandedRowRender 渲染展开行详情。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| S Semi Design 设计稿.fig | 2M | 姜 姜鹏志 | 2020-02-02 |
实际用户数量：1,480,000 7 天留存：98% 安全等级：3 级 垂类标签： 设计 | |||
| S Semi Design 演示文稿 | 2M | 郝 郝宣 | 2020-01-17 |
| S 设计文档 | 34KB | Z Zoey | 2020-01-26 |
树形数据展示
dataSource 含 children，行内展开三角 + 缩进。
| Key | 名称 | 数据类型 | 描述 | 默认值 |
|---|---|---|---|---|
| videos_info | 视频信息 | Object 对象 | 视频的元信息 | 无 |
| status | 视频状态 | Enum<Integer> 枚举 | 可见、推荐状态 | 1 |
| vid | 视频 ID | String 字符串 | 唯一 ID | 无 |
| text_info | 文本信息 | Object 对象 | 文本的元信息 | 无 |
| title | 视频标题 | String 字符串 | 视频的标题 | 无 |
| video_description | 视频描述 | String 字符串 | 视频的描述 | 无 |
自定义行或单元格事件以及属性
onRow 返回 className / style / onClick。
| 标题 | 大小 | 所有者 |
|---|---|---|
| Semi Design 设计稿1.fig | 128 | 姜鹏志 |
| Semi D2C 设计稿2.fig | 64 | 郝宣 |
| Semi Design 设计稿3.fig | 199 | 姜鹏志 |
| Semi D2C 设计稿4.fig | 32 | 郝宣 |
| Semi Design 设计稿5.fig | 88 | 姜鹏志 |
实现斑马纹样式
用 onRow 给偶数行返回背景色。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| Semi Design 设计稿.fig | 2M | 姜鹏志 | 2020-02-02 05:13 |
| Semi Design 分享演示文稿 | 2M | 郝宣 | 2020-01-17 05:31 |
| 设计文档 | 34KB | Zoey Edwards | 2020-01-26 11:01 |
| Semi D2C 设计稿.fig | 2M | 姜鹏志 | 2020-02-02 05:13 |
| Semi D2C 分享演示文稿 | 2M | 郝宣 | 2020-01-17 05:31 |
| Semi D2C 设计文档 | 34KB | Zoey Edwards | 2020-01-26 11:01 |
实现表头样式定制
headerStyle 统一定制所有表头单元格。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| Semi Design 设计稿.fig | 2M | 姜鹏志 | 2020-02-02 05:13 |
| Semi Design 分享演示文稿 | 2M | 郝宣 | 2020-01-17 05:31 |
| 设计文档 | 34KB | Zoey Edwards | 2020-01-26 11:01 |
| Semi D2C 设计稿.fig | 2M | 姜鹏志 | 2020-02-02 05:13 |
实现单元格 Hover 样式定制
CSS 覆盖为单个单元格高亮。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| Semi Design 设计稿.fig | 2M | 姜鹏志 | 2020-02-02 05:13 |
| Semi Design 分享演示文稿 | 2M | 郝宣 | 2020-01-17 05:31 |
| 设计文档 | 34KB | Zoey Edwards | 2020-01-26 11:01 |
单元格缩略
column.ellipsis 超长文本省略号截断。
| 标题 | 所有者 | 大小 | 更新日期 |
|---|---|---|---|
| Semi is designed based on FA architecture, and the main logic is extracted as Foundation package | Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang | 2M | 2020-02-02 05:13 |
| 由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。 | 郝宣郝宣郝宣郝宣郝宣郝宣郝宣郝宣郝宣郝宣 | 2M | 2020-02-02 05:13 |
| Semi is designed based on FA architecture, easy to migrate to other frameworks | Pengzhi Jiang | 34KB | 2020-02-02 05:13 |
| 易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。 | 郝宣 | 34KB | 2020-02-02 05:13 |
可伸缩列
column.resizable + width 拖拽改列宽。
| 标题 | 所有者 | 更新日期 | |
|---|---|---|---|
| Semi Design 设计稿0.fig | 100 KB | 姜鹏志 | 2022-01-01 |
| Semi D2C 设计稿1.fig | 199 KB | 郝宣 | 2022-01-02 |
| Semi Design 设计稿2.fig | 2 KB | 姜鹏志 | 2022-01-03 |
| Semi D2C 设计稿3.fig | 3 KB | 郝宣 | 2022-01-04 |
| Semi Design 设计稿4.fig | 4 KB | 姜鹏志 | 2022-01-05 |
可折叠分组
按部门分组，点击分组标题行折叠/展开。
| 姓名 | 年龄 |
|---|---|
| 研发 | |
| 设计 | |
| 运营 | |
表格分组
groupBy + renderGroupSection 自定义分组表头。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| 根据文件大小分组 100 KB | |||
| Semi Design 设计稿0.fig | 100 KB | 姜鹏志 | 2022-01-01 |
| Semi D2C 设计稿1.fig | 100 KB | 郝宣 | 2022-01-02 |
| 根据文件大小分组 105 KB | |||
| Semi Design 设计稿2.fig | 105 KB | 姜鹏志 | 2022-01-03 |
| Semi D2C 设计稿3.fig | 105 KB | 郝宣 | 2022-01-04 |
| 根据文件大小分组 112 KB | |||
| Semi Design 设计稿4.fig | 112 KB | 姜鹏志 | 2022-01-05 |
| Semi D2C 设计稿5.fig | 112 KB | 郝宣 | 2022-01-06 |
虚拟化表格
virtualized + height + rowHeight，承载 200+ 行。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| Semi Design 设计稿0.fig | 0 KB | 姜鹏志 | 2022-01-01 |
| Semi D2C 设计稿1.fig | 5 KB | 郝宣 | 2022-01-02 |
| Semi Design 设计稿2.fig | 10 KB | 姜鹏志 | 2022-01-03 |
| Semi D2C 设计稿3.fig | 15 KB | 郝宣 | 2022-01-04 |
| Semi Design 设计稿4.fig | 20 KB | 姜鹏志 | 2022-01-05 |
| Semi D2C 设计稿5.fig | 25 KB | 郝宣 | 2022-01-06 |
| Semi Design 设计稿6.fig | 30 KB | 姜鹏志 | 2022-01-07 |
| Semi D2C 设计稿7.fig | 35 KB | 郝宣 | 2022-01-08 |
| Semi Design 设计稿8.fig | 40 KB | 姜鹏志 | 2022-01-09 |
| Semi D2C 设计稿9.fig | 45 KB | 郝宣 | 2022-01-10 |
| Semi Design 设计稿10.fig | 50 KB | 姜鹏志 | 2022-01-11 |
| Semi D2C 设计稿11.fig | 55 KB | 郝宣 | 2022-01-12 |
| Semi Design 设计稿12.fig | 60 KB | 姜鹏志 | 2022-01-13 |
无限滚动
onReachBottom 触底追加数据。
| 标题 | 大小 | 所有者 | 更新日期 |
|---|---|---|---|
| Semi Design 设计稿0.fig | 0 KB | 姜鹏志 | 2022-01-01 |
| Semi D2C 设计稿1.fig | 5 KB | 郝宣 | 2022-01-02 |
| Semi Design 设计稿2.fig | 10 KB | 姜鹏志 | 2022-01-03 |
| Semi D2C 设计稿3.fig | 15 KB | 郝宣 | 2022-01-04 |
| Semi Design 设计稿4.fig | 20 KB | 姜鹏志 | 2022-01-05 |
| Semi D2C 设计稿5.fig | 25 KB | 郝宣 | 2022-01-06 |
| Semi Design 设计稿6.fig | 30 KB | 姜鹏志 | 2022-01-07 |
| Semi D2C 设计稿7.fig | 35 KB | 郝宣 | 2022-01-08 |
| Semi Design 设计稿8.fig | 40 KB | 姜鹏志 | 2022-01-09 |
| Semi D2C 设计稿9.fig | 45 KB | 郝宣 | 2022-01-10 |
受控的动态表格
运行时增删数据行，响应式驱动重渲染。
| 姓名 | 城市 | |
|---|---|---|
| 陈一 | 32 | 杭州 |
| 林二 | 28 | 上海 |
| 王三 | 45 | 北京 |
完全自定义渲染
render snippet 卡片式整格内容。
| 成员 | 角色 | 状态 |
|---|---|---|
| 陈 陈一 chen@example.com | 管理员 | 在线 |
| 林 林二 lin@example.com | 编辑 | 离线 |
| 王 王三 wang@example.com | 访客 | 在线 |
useFullRender 物料摆放
首列 useFullRender，自行摆放缩进/展开图标。
| 名称 | 大小 |
|---|---|
| 设计资产 | — |
| Semi Design 设计稿.fig | 2M |
| 组件规范.pdf | 1.2M |
| 开发文档 | — |
| API 参考.md | 48KB |
表头合并
column.children 定义子列，父列 title 横跨叶子列。
| 姓名 | 成绩 | 居住地 | |
|---|---|---|---|
| 陈一 | 92 | 85 | 杭州 |
| 林二 | 78 | 91 | 上海 |
| 王三 | 88 | 76 | 北京 |
| 赵四 | 95 | 89 | 深圳 |
行列合并
column.onCell 返回 colSpan / rowSpan 合并单元格。
| 姓名 | 电话 | 手机 | 居住地 |
|---|---|---|---|
| 李四 | 0571-22098909 | 18889898989 | 成都 |
| 王五 | 0571-22098333 | 18889898888 | 成都 |
| 陈二 | 0575-22098909 | 18900010002 | 杭州 |
| 孙六 | 18900010002 | 杭州 |
API 参考
Table
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columns | 列定义：key/dataIndex/title/width/fixed/resizable/align/className/ellipsis/sorter/filters/onFilter/filterConfirmMode/render；children 表头合并（子列，父列 title 横跨叶子列）；onCell 返回 colSpan/rowSpan 行列合并（值 0 跳过渲染）；useFullRender 完全自定义（render 额外收到 expandIcon/indentText 物料自行摆放） | ColumnDef<T>[] | [] |
dataSource | 数据行 | T[] | [] |
rowKey | 行唯一键解析 | string | ((record: T) => RowKey) | 'key' |
size | — | 'small'|'default'|'large' | 'default' |
bordered | 单元格边框 | boolean | false |
stripe | 斑马纹 | boolean | false |
loading | 半透明遮罩 + spinner | boolean | false |
sortState | 受控排序态；受控时不回写，仅 onSortChange | SortState | undefined |
defaultSortState | 非受控初始排序 | SortState | { key: null, order: null } |
onSortChange | — | (state: SortState) => void | undefined |
pagination | false 关闭；对象/缺省启用内置分页(pageSize 默认 10)。current 受控不回写 | false | { pageSize?: number; current?: number; defaultCurrent?: number; onChange?: (page: number) => void } | undefined |
rowSelection | selectedRowKeys 受控不回写；defaultSelectedRowKeys / onChange / getCheckboxProps；checkStrictly(默认 false) 树形父子联动开关：false 勾父连带勾后代+后代部分选中父行半选，true 父子独立 | RowSelection<T> | undefined |
expandable | expandedRowRender / rowExpandable / expandedRowKeys 受控不回写 / defaultExpandedRowKeys / onExpand | Expandable<T> | undefined |
tree | 树形数据：true 或 { childrenColumnName(默认 children) / indentSize(默认 16) / expandedRowKeys 受控不回写 / defaultExpandedRowKeys / onExpand }。第一列内展开三角+逐级缩进；排序/分页/筛选作用于顶层行 | boolean | TreeTable | undefined |
rowClassName | — | (record: T, index: number) => string | undefined |
empty | 空数据占位文案 | string | '暂无数据' |
ariaLabel | table aria-label | string | undefined |
onRowClick | — | (info: { record: T; index: number }) => void | undefined |
virtualized | 行虚拟滚动：仅渲染视口内行，适合大数据(1000+)。启用时忽略 pagination(全量滚动)、表头 sticky 固定顶部；假定行等高，不建议与 expandable 混用 | boolean | false |
height | 虚拟滚动视口高度(px)，virtualized 时生效 | number | 400 |
rowHeight | 虚拟滚动行高(px)，virtualized 时生效 | number | 48 |
onChange | 聚合事件：排序/筛选/分页任一变化的主入口（受控数据回流） | (info: TableChangeInfo) => void | undefined |
onFilterChange | 筛选状态变化（含重置） | (info: { dataIndex: string; values: (string|number)[] }) => void | undefined |
onPaginationChange | 分页变化 | (info: { current: number; pageSize: number }) => void | undefined |
onSelectChange | 选择集变化（与 rowSelection.onChange 同时触发） | (info: { selectedRowKeys: RowKey[]; selectedRows: T[] }) => void | undefined |
onExpandChange | 行展开/收起（展开行与树形行均触发） | (info: { expanded: boolean; record: T; expandedRowKeys: RowKey[] }) => void | undefined |
onScroll | 滚动位置（含触底，用于无限加载） | (info: TableScrollInfo) => void | undefined |
onReachBottom | 纵向触底（懒加载触发），距底 reachBottomThreshold 像素内触发一次 | () => void | undefined |
reachBottomThreshold | onReachBottom 触发阈值（距底像素），默认 0（精确触底） | number | 0 |
gridNav | 交互态 WAI-ARIA Grid Pattern 开关；缺省时按是否有交互能力自动启用，显式 true/false 强制 | boolean | undefined |
scroll | 横/纵向滚动配置：x 设最小宽度横向溢出，y 设最大高度纵向溢出；scrollToFirstRowOnChange 分页/排序/筛选变化后滚回顶部 | ScrollConfig | undefined |
components | 覆盖组成元素 tag（对齐 Semi）：thead/tbody/行经 svelte:element 换标签，内部 class/role/事件仍注入 | { table?; header?; body? }（tag 名） | undefined |
getVirtualizedListRef | 返回虚拟化滚动控制句柄，仅 virtualized 有效（对齐 Semi） | (ref: { scrollTo; scrollToItem }) => void | undefined |
sticky | 表头吸顶：true 时 sticky 定位；对象可指定 offsetHeader（px） | boolean | { offsetHeader?: number } | false |
showHeader | 是否显示表头 | boolean | true |
defaultExpandAllRows | 默认展开全部行（含树形行） | boolean | false |
getPopupContainer | 筛选浮层挂载容器，默认跟随触发按钮 | () => HTMLElement | undefined |
onRow | 行级事件与属性（返回值合并到 tr；第三参 rowStatus 含 disabled/selected） | (record: T, index: number, rowStatus?: { disabled?; selected? }) => { onClick?; onDoubleClick?; onMouseEnter?; onMouseLeave?; className?; style? } | undefined |
onHeaderRow | 表头行级事件与属性 | (columns: ColumnDef<T>[], index: number) => { onClick?; className?; style? } | undefined |
expandRowByClick | 点击行体触发展开/收起 | boolean | false |
expandCellFixed | 展开图标列固定方向 | boolean | 'left' | 'right' | undefined |
keepDOM | true 时保留已展开行 DOM 但隐藏（display:none） | boolean | false |
indentSize | 树形缩进像素（tree.indentSize 优先） | number | 20 |
groupBy | 按字段名或函数对数据行分组，插入分组标题行 | string | ((record: T) => string) | undefined |
renderGroupSection | 自定义分组标题渲染 | Snippet<[{ groupKey: string; group: T[] }]> | undefined |
clickGroupedRowToExpand | 点击分组标题行折叠/展开该组内数据行（groupBy 时生效，disclosure 模式 role=button+aria-expanded+Enter/Space 可达） | boolean | false |
defaultExpandAllGroupRows | 非受控：初始默认展开全部分组。缺省(未配置)时向后兼容为全展开；显式 false 初始全折。动态加载数据不生效 | boolean | undefined |
expandAllGroupRows | 受控：true 展开全部分组、false 折叠全部分组；受控时不回写，仅经 onGroupExpandChange 通知 | boolean | undefined |
onGroupExpandChange | 分组展开/收起变化回调（点击分组标题行触发） | (info: { groupKey: string; expanded: boolean; expandedGroupKeys: string[] }) => void | undefined |
onGroupedRow | 分组标题行自定义属性回调（类似 onRow，仅作用于分组头行），返回值合并进分组头 tr | (group: T[], index: number) => { onClick?; onDoubleClick?; className?; style? } | undefined |
titleSnippet | 表格顶部标题区域 | Snippet | undefined |
footerSnippet | 表格底部内容区域（接收 currentData） | Snippet<[{ currentData: T[] }]> | undefined |
renderPagination | 自定义分页器渲染，替换内置 Pagination UI；调用 onChange(page) 触发内部翻页（受控 current 不回写） | Snippet<[{ total: number; currentPage: number; pageSize: number; onChange: (page: number) => void }]> | undefined |
expandIcon | 自定义展开行的展开/收起图标（替换默认三角），仅 expandable 展开列生效 | Snippet<[{ expanded: boolean; record: T }]> | undefined |
hideExpandedColumn | 展开按钮是否并入首列。默认 true（并入首列，对齐 Semi）；false 时展开按钮单独成列 | boolean | true |
rowSpanHover | 合并单元格（rowSpan）时 hover 高亮整个合并区（渐进能力，依赖单元格合并） | boolean | false |
headerStyle | 表头单元格（所有 th，含 fixed 表头）自定义内联样式 | string | Record<string, string> | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onChange | — | 排序/筛选/分页任一变化的聚合主入口（受控数据回流） |
onSortChange | — | 表头排序切换(三态循环) |
onFilterChange | — | 列筛选状态变化（含重置） |
onPaginationChange | — | 分页变化 |
onSelectChange | — | 选择集变化（与 rowSelection.onChange 同时触发） |
onExpandChange | — | 行展开/收起（展开行与树形行均触发） |
onGroupExpandChange | — | 分组展开/收起（点击分组标题行触发） |
onScroll | — | 滚动位置（含触底） |
onReachBottom | — | 纵向触底（懒加载触发） |
rowSelection.onChange | — | 行选择变更，回传 keys 与对应 rows |
pagination.onChange | — | 页码变更 |
onRowClick | — | 行点击(复选框/排序按钮已阻止冒泡) |
Slots
| 名称 | 说明 |
|---|---|
column.render | 单元格自定义渲染 Snippet<[{ value, record, index }]> |
titleSnippet | 表格顶部标题区域 Snippet |
footerSnippet | 表格底部内容区域 Snippet<[{ currentData: T[] }]> |
renderGroupSection | 分组标题渲染 Snippet<[{ groupKey, group }]> |
renderPagination | 自定义分页器渲染 Snippet<[{ total, currentPage, pageSize, onChange }]> |
expandIcon | 自定义展开图标 Snippet<[{ expanded, record }]> |
empty | 空态文案经 empty prop 配置(字符串) |
Accessibility
| APG | grid|table |
| 键盘交互 | ↑↓ 行←→ 列Home·End 行内首末Ctrl·Cmd+Home·End 表首末PageUp·PageDown 翻屏Enter·F2 进入单元格交互、Esc 退出 |
- 交互态(排序/筛选/行选择/展开/树形/行点击任一)遵循 WAI-ARIA APG Grid Pattern：role=grid + aria-rowcount/colcount(虚拟化为逻辑总数) + role=row(aria-rowindex 真实序) + role=columnheader/rowheader/gridcell + aria-colindex；单元格 roving tabindex(整 grid 单一 Tab 停靠点，纯派生)，二维方向键漫游(纯函数 nextGridCoord)，命令式 focusCell 聚焦；虚拟化下方向键移到未渲染行先滚动进视口再 tick 后聚焦，焦点行被回收时回退到 grid 容器并 announce(不掉 body)；Enter/F2 进入单元格内控件交互模式、Esc 退出回导航(导航模式下单元格内控件 tabindex=-1 不破坏 roving)。纯展示表(无交互)降级为 role=table 省漫游。可排序列 aria-sort(ascending/descending/none)；行选择原生 checkbox，全选 aria-label「全选」、行选「选择此行」，半选经 attachment 命令式设 input.indeterminate(只写属性、不读几何、无响应式循环)；焦点环 --cd-focus-ring；reduced-motion 关闭 spinner 与图标过渡。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-table-bg-default | var(--cd-color-bg-1) | 表格固定列及吸顶表头背景颜色 |
--cd-color-table-body-bg-default | var(--cd-color-bg-1) | 表格行背景颜色 - 默认态 |
--cd-color-table-body-bg-hover | var(--cd-color-fill-0) | 表格行背景颜色 - 悬浮态 |
--cd-color-table-border-default | var(--cd-color-border) | 表格描边颜色 |
--cd-color-table-cell-bg-hover | var(--cd-color-bg-0) | 让表格在 hover 时正确显示 body-bg-hover 颜色，如无必要不要修改 |
--cd-color-table-disabled-bg-default | var(--cd-color-disabled-bg) | 表格禁用态背景颜色 |
--cd-color-table-expanded-bg-default | transparent | 表格展开行图标容器背景颜色 - 默认 |
--cd-color-table-expanded-icon-default | var(--cd-color-text-2) | 表格展开行图标颜色 - 默认 |
--cd-color-table-filter-on-text-default | var(--cd-color-primary) | 表格过滤按钮颜色 - 激活态 |
--cd-color-table-filter-text-default | var(--cd-color-text-2) | 表格过滤按钮颜色 - 默认态 |