Table 表格

Table 是 ssq-ui 里的核心数据展示组件，支持单列和多列排序、文本筛选、多选筛选、吸顶表头、固定列、键盘行导航，以及大数据量场景下的自动虚拟滚动。

基础用法

排序、筛选与插槽

宽表横向滚动

当列数较多或列宽较大时，可以通过外层容器的横向滚动完整查看整张表。下面这个示例里，所有列都会一起滚动，不会单独固定在左侧或右侧。

多列排序

启用 multipleSort 后，可以维护一条有序的排序链。普通点击会重置为单列排序，按住 Shift 再点击其他表头时，会追加或更新次级排序规则。

大数据量

当数据长度超过 virtualThreshold 时，Table 会只渲染可视区域附近的行，并附带一定的 overscan 以保证滚动观感。

接口说明

属性

名称	类型	默认值	说明
columns	TableColumn[]	[]	列配置，支持宽度、固定列、排序和筛选。
data	Record<string, unknown>[]	[]	表格数据源。
rowKey	string | ((row, rowIndex) => string | number)	'id'	行唯一标识读取方式。
height	number | string	undefined	固定可视高度。
maxHeight	number | string	undefined	最大可视高度。
virtualThreshold	number	500	超过该数据量阈值后自动启用虚拟滚动。
estimatedRowHeight	number	44	未测量行高时使用的估算值。
overscan	number	6	视口上下额外渲染的缓冲行数。
stickyHeader	boolean	true	是否将表头吸附在表格容器顶部。
multipleSort	boolean	false	是否启用多列排序。普通点击重置为单列，Shift + click 追加或更新排序链。
sortState	TableSortState | null	undefined	受控排序状态。单列模式会发出 { columnKey, order }，多列模式会发出 TableSortRule[]。
filterState	TableFilterState	undefined	受控筛选状态。
emptyText	string	'暂无数据'	空状态文案。

事件

名称	签名	说明
update:sortState	(state: TableSortState | null) => void	排序状态变化时触发。
sort-change	(state: TableSortState | null) => void	update:sortState 的镜像事件，适合做副作用处理。
update:filterState	(state: TableFilterState) => void	筛选应用或清空时触发。
filter-change	(state: TableFilterState) => void	update:filterState 的镜像事件，适合做副作用处理。

插槽

名称	签名	说明
header	({ column, columnIndex, sortState, filterState }) => VNode[]	自定义表头内容。
cell	({ column, row, value, rowIndex, columnIndex, sortState, filterState }) => VNode[]	自定义单元格内容。
empty	() => VNode[]	自定义空状态。

性能说明

ssq-ui 内置了一个 10,000 行基准测试脚本，可通过 npm run perf:smoke 触发。脚本会记录表格的首次渲染耗时和虚拟滚动更新成本，并把结果输出到 node_modules/.tmp/perf-smoke/table-benchmark.json。