用途:在 TanStack Table 中管理列尺寸。尺寸是数值状态,把它翻译成布局由渲染器决定,该技能负责模型侧的尺寸定义与 API 调用。
主要能力:通过 columnSizingFeature 启用列宽状态,列上可设置 size、minSize、maxSize,并可调用 getSize、getStart、getAfter 以及表格总宽相关 API,适用于表格、grid 或 flex CSS 布局场景。
使用方式:先组合特性并设定默认列宽,例如 import { columnSizingFeature, tableFeatures } from '@tanstack/table-core',再用 tableFeatures({ columnSizingFeature }) 生成 features,默认列可写成 { size: 180, minSize: 80, maxSize: 480 }。渲染时把模型尺寸应用到样式:cell.style.width = ${cell.column.getSize()}px,tableElement.style.width = ${table.getTotalSize()}px,并对表头、单元格和固定偏移使用同一套尺寸模型,保持几何一致。
限制与常见错误:数值状态不会自动为无渲染标记的 headless 结构加 CSS,期望状态直接给 DOM 上样式是错误做法;不要向数值 API 传 CSS 尺寸(如 '25%'),百分比与 auto 布局属于渲染器 CSS;不要让内容覆盖偏移(如 cell.style.minWidth = 'max-content'),否则渲染宽度与模型不一致会导致总宽和固定偏移错位。
其他细节(如具体默认值、区域感知的偏移签名)可查看 node_modules/@tanstack/table-core/dist/features/column-sizing/ 目录。