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 互斥（虚拟时忽略分页）。

Accessibility

• 交互态(排序/筛选/行选择/展开/树形/行点击任一)遵循 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 与图标过渡。

设计变量