SuperAPI AI 工具集

tanstack-table-core-column-sizing

前端与建站

查看项目

更新于 10-16 06:24

技能介绍

用途:该技能基于 core 与 table-features,用于在 TanStack Table Core 中处理列宽尺寸。核心观点是:尺寸是数值状态,把它翻译成布局是渲染层的决定。

主要能力:提供 columnSizingFeature 与 tableFeatures 组合,支持 defaultColumn 的 size、minSize、maxSize 配置,以及 getSize、getStart、getAfter、getTotalSize 等尺寸与偏移 API,可用于表格、网格或 flex CSS 布局。

使用方式:通过 import { columnSizingFeature, tableFeatures } from '@tanstack/table-core' 引入,并用 tableFeatures({ columnSizingFeature }) 组装特性;defaultColumn 可设 { size: 180, minSize: 80, maxSize: 480 }。渲染时用 cell.style.width = ${cell.column.getSize()}px,表格容器用 tableElement.style.width = ${table.getTotalSize()}px,并对表头、单元格和固定偏移应用同一套模型尺寸。

限制与常见错误:数值状态不会自动给无头标记加 CSS,需自行写入样式;不要把 CSS 尺寸(如 '25%')传入数值 API,百分比与自动布局应放在渲染层 CSS;不要让内容覆盖偏移,若渲染宽度与模型不一致,总宽与固定偏移将不再匹配几何。可查看 node_modules/@tanstack/table-core/dist/features/column-sizing/ 了解默认值与区域感知的偏移签名。