用途:在 TanStack Table v9 中实现列固定(pinning),把列划分到逻辑上的 start、center、end 三个区域。该技能建立在 core、table-features 与 column-sizing 之上,固定功能只负责计算区域与偏移量,sticky 的视觉效果需由渲染器自行用 CSS 完成。
启用方式:从 '@tanstack/table-core' 引入 columnPinningFeature、columnSizingFeature 与 tableFeatures,通过 tableFeatures() 组装 features;初始状态可用 initialState.columnPinning 配置,例如 start: ['name']、end: ['actions']。
主要能力与用法:为列生成样式,根据 column.getIsPinned() 返回 'start'、'end' 或 false 决定 position 为 sticky 或 relative;使用 insetInlineStart 与 column.getStart('start')、insetInlineEnd 与 column.getAfter('end') 计算偏移;宽度用 column.getSize() 设置,zIndex 在固定时为 1,否则为 0,背景可设为 'Canvas'。
限制与常见错误:v9 使用逻辑区域 start 与 end,状态和集合 API 均如此,不能沿用 v8 的物理区域 left/right,应写 column.pin('start') 而非 column.pin('left');固定功能不会自动产生 sticky CSS,需手动把样式赋给单元格,如 Object.assign(cell.style, style(column)),定位、背景、溢出与层叠由渲染器负责;渲染宽度必须与模型宽度一致,应使用 column.getSize() 的像素值而非 'auto',否则 sticky 偏移会出现间隙或重叠。建议使用 CSS 逻辑属性以支持 RTL。API 细节可查看 node_modules/@tanstack/table-core/dist/features/column-pinning/ 目录。