SuperAPI AI 工具集

column-pinning

前端与建站

查看项目

更新于 10-16 03:04

技能介绍

用途:在 TanStack Table 中把列固定到逻辑 start、center、end 三个区域,配合渲染层自实现的粘性 CSS 呈现固定效果。该技能建立在 core、table-features 与 column-sizing 之上,固定功能只划分模型区域并计算偏移,具体定位由渲染器负责。

主要能力:提供 columnPinningFeature(并可与 columnSizingFeature 一起通过 tableFeatures 注册),初始状态可用 columnPinning: { start: ['name'], end: ['actions'] } 配置;提供 getIsPinned、getStart('start')、getAfter('end')、getSize() 等 API 计算位置与尺寸。

使用方式:注册特性后按列生成样式,例如位置在固定时为 sticky、否则 relative,起止方向分别用逻辑属性 insetInlineStart / insetInlineEnd 配合偏移量,宽度取列尺寸,固定列设 zIndex 为 1、背景设为 Canvas。注意使用 CSS 逻辑属性以支持方向感知渲染。API 细节可查阅 node_modules/@tanstack/table-core/dist/features/column-pinning/。

常见误区:应使用逻辑区域 start/end(如 column.pin('start')),不要用 v8 的物理区域 left;固定不会自动产生粘性 CSS,需要显式把计算出的样式赋给单元格;渲染宽度必须与模型宽度一致,用列尺寸设置宽度,不要用 auto,否则粘性偏移会出现缝隙或重叠。

适用场景:需要冻结首列或操作列、支持 RTL 布局的数据表格。限制:背景、溢出与层叠由渲染层自行处理,其余细节资料暂未提供。