TanStack React Table 列宽调整Column Resizing实战指南从拖拽交互到零重渲染的高性能方案【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址: https://gitcode.com/gh_mirrors/ta/table本文基于 TanStack Table 仓库中 React 适配器的官方指南 Column Resizing Guide系统讲解如何在tanstack/react-table中启用并定制列宽拖拽调整功能包括功能依赖关系、columnResizeMode提交时机、columnResizeDirection方向控制、尺寸与拖拽 API 的完整用法以及拖拽过程态columnResizingstate的外部 atom 托管方案最后结合核心包 columnResizingFeature 的源码实现剖析拖拽事件合帧、触控事件清理等底层细节并给出仓库中“零 React 重渲染”高性能示例的完整思路。一、功能依赖先装 Column Sizing再装 Column Resizing列宽调整功能构建在列宽定义column sizing能力之上因此功能注册顺序必须是columnSizingFeature在前、columnResizingFeature在后。两个 feature 都是纯逻辑插件通过tableFeatures()组合后传入useTableimport { useTable, tableFeatures, columnSizingFeature, columnResizingFeature, } from tanstack/react-table const features tableFeatures({ columnSizingFeature, columnResizingFeature, }) const table useTable({ features, columns, data, })在核心包中columnResizingFeature通过assignColumnPrototype与assignHeaderPrototype给列和表头挂载getCanResize()、getIsResizing()、getResizeHandler()等 API并通过constructTableAPIs挂上setColumnResizing和resetHeaderSizeInfo见 columnResizingFeature.ts。如果只需要定义初始宽度、最小/最大宽度而不需要拖拽可参见同目录的 Column Sizing 指南。可运行的完整示例见仓库中的 column-resizing 示例其入口文件 main.tsx 同时演示了语义化table、Flexbox 布局的div表格和绝对定位div表格三种表格骨架下应用列宽的写法。二、启用与禁用拖拽全局与逐列两级开关启用列宽调整只需把上面两个 feature 加入features。column.getCanResize()默认对所有列返回true但存在两级关闭手段表级选项enableColumnResizing一次禁用整张表的所有列拖拽列级选项enableResizing只禁用某一列同时可用size直接设定该列起始宽度。import { columnResizingFeature, columnSizingFeature, tableFeatures, useTable, } from tanstack/react-table const features tableFeatures({ columnSizingFeature, columnResizingFeature, }) const columns [ { accessorKey: id, enableResizing: false, // disable resizing for just this column size: 200, // starting column size }, //... ] const table useTable({ features, columns, data, })从源码看判定逻辑非常直接enableResizing ?? true与enableColumnResizing ?? true两个开关做逻辑与任一为false即不可拖拽见 columnResizingFeature.utils.ts。类型定义中也确认了两个开关的默认值均为启用见 columnResizingFeature.types.ts。三、columnResizeMode宽度何时“落盘”columnResizeMode决定拖拽过程中列宽提交时机核心包中的默认值为onEnd见 columnResizingFeature.tsonEnd默认column.getSize()在用户松手拖拽结束之前不会返回新宽度拖拽期间通常只显示一个指示器indicator跟随鼠标。在 React 中复杂表格的每次拖拽帧都可能触发整表重渲染onEnd模式能显著避免拖拽过程中的卡顿与掉帧。这并不是说 React 做不到 60 fps 的实时拖拽渲染而是要达到该效果往往需要额外的 memo 化或性能优化。onChange拖拽的每一帧都立即提交新列宽column.getSize()实时变化视觉反馈最跟手。通过表级选项columnResizeMode切换const table useTable({ //... columnResizeMode: onChange, // change column resize mode to onChange })示例工程 column-resizing 提供了下拉框可以运行时在onEnd与onChange之间切换直观对比两种模式下的渲染行为。onEnd模式下的拖拽指示器偏移量由临时状态table.state.columnResizing.deltaOffset提供示例中据此对 resizer 元素做translateX位移见 main.tsx。四、columnResizeDirection适配 RTL 布局TanStack Table 默认按从左到右left-to-right的方向计算拖拽偏移。如果你的界面是阿拉伯语、希伯来语等 RTLright-to-left排版需要把拖拽方向改为rtl使向右拖拽产生“变窄”而非“变宽”的直觉效果const table useTable({ //... columnResizeDirection: rtl, // change column resize direction to rtl for certain locales })源码中该选项直接影响偏移计算的方向因子columnResizeDirection rtl ? -1 : 1deltaOffset会乘以该因子见 columnResizingFeature.utils.ts。示例工程同样提供了ltr/rtl的运行时切换见 main.tsx并且外层容器会同步设置style{{ direction }}让 CSS 排版与拖拽方向保持一致。五、把尺寸应用到 UISize 系列 API将列宽真正作用到表头单元格、数据单元格或页脚单元格上有以下三个等价的取宽 APIheader.getSize() column.getSize() cell.column.getSize()具体如何写进标记markup由你自己决定最常见的是内联样式或 CSS 变量两种方式。内联样式的最小写法th key{header.id} colSpan{header.colSpan} style{{ width: ${header.getSize()}px }} 示例工程中th、td分别使用header.getSize()与cell.column.getSize()设置宽度见 main.tsx。而在绝对定位布局里还会结合header.getStart()/cell.column.getStart()计算left值实现像素级对齐。考虑到后文性能章节如果表格较复杂建议改用 CSS 变量来应用列宽。六、把拖拽挂到 UIResize 系列 API6.1 getResizeHandler一个 handler 同时支持鼠标与触控TanStack Table 提供了预置事件处理函数内部完成“记录起点 → 监听拖拽 → 更新临时状态 → 按模式提交宽度”的完整流程你只需把它挂到 resize handle 上ColumnResizeHandle onMouseDown{header.getResizeHandler()} // for desktop onTouchStart{header.getResizeHandler()} // for mobile /从 header_getResizeHandler 的源码可以看到它的完整行为记录起点按下时捕获startOffsetclientX、startSize并把所有叶子表头的当前宽度快照到columnSizingStart支持表头组——拖动分组表头会同时改变组内所有叶子列鼠标路径在 document 上注册mousemove/mouseupmouseup时自动移除监听并执行onEnd提交触控路径注册touchmove/touchend并对touchmove调用preventDefault阻止页面滚动同时注册了touchcancel处理器——当浏览器系统手势接管滚动、切换标签页等时touchend不会触发源码通过touchcancel保证监听器不会永久泄漏合帧优化指针设备上报频率常高于屏幕刷新率源码用requestAnimationFrame把同帧内的多次move合并为一次状态更新——第一帧立即应用其余挂起等待下一帧批量处理见 utils 第 182-212 行。这意味着即使你在 UI 层不做任何优化核心层已经保证“每动画帧最多一次状态写入”提交时机每次更新在table._reactivity.batch(...)中完成把“临时状态写入 列宽提交”合并在一次通知冲刷里onEnd提交与状态复位也合并在同一个 batch 中见 utils 第 221-237 行。多指触控会被忽略event.touches.length 1直接返回避免双指缩放误触发拖拽。6.2 状态与判定 API拖拽过程中的判定和临时状态操作 APIheader.getResizeHandler() // 绑定拖拽 column.getCanResize() // 是否渲染 resize handle column.getIsResizing() // 是否正在拖拽该列表格实例层面table.setColumnResizing((old) ({ ...old, deltaOffset: 12, })) table.resetHeaderSizeInfo() table.resetHeaderSizeInfo(true)resetHeaderSizeInfo()把columnResizing重置回initialState.columnResizing的克隆传入true则忽略 initial state直接回到“无拖拽”的默认状态实现见 table_resetHeaderSizeInfo。6.3 用 columnResizing 状态渲染拖拽指示器TanStack Table 维护了一个columnResizing状态对象你可以据此渲染拖拽指示器ColumnResizeIndicator style{{ transform: header.column.getIsResizing() ? translateX(${table.state.columnResizing.deltaOffset ?? 0}px) : , }} /该状态对象是纯临时的拖拽信息完整结构如下与 columnResizingState 类型定义 一致type columnResizingState { columnSizingStart: Array[string, number] // 拖拽开始时各叶子列的 [id, size] 快照 deltaOffset: null | number // 当前像素级偏移 deltaPercentage: null | number // 相对起始宽度的百分比偏移 isResizingColumn: false | string // 正在拖拽的列 id startOffset: null | number // 指针起始 clientX startSize: null | number // 起始列宽 }大多数场景你不需要手工管理这份临时状态。如果你确实需要——例如在表格组件之外的其他组件中观察拖拽状态——推荐的 v9 做法是外部 atom把它作为 table 的atoms选项传入。外部 atom 允许在应用任意位置做细粒度订阅其他代码可以观察 resize 状态而不需要触发“拥有”表格的组件重渲染import { useCreateAtom, useSelector } from tanstack/react-store import type { columnResizingState } from tanstack/react-table const columnResizingAtom useCreateAtomcolumnResizingState({ columnSizingStart: [], deltaOffset: null, deltaPercentage: null, isResizingColumn: false, startOffset: null, startSize: null, }) const columnResizing useSelector(columnResizingAtom) // subscribe wherever it is needed const table useTable({ features, columns, data, atoms: { columnResizing: columnResizingAtom, }, })作为替代v8 风格的state.columnResizingonColumnResizingChange受控模式仍然被支持适合简单集成或迁移 v8 代码只是细粒度不如外部 atom。更多对比可参考 Table State 指南const [columnResizing, setColumnResizing] useStatecolumnResizingState({ columnSizingStart: [], deltaOffset: null, deltaPercentage: null, isResizingColumn: false, startOffset: null, startSize: null, }) const table useTable({ features, columns, data, state: { columnResizing, }, onColumnResizingChange: setColumnResizing, })在 React 适配器中表格内部状态全部以 TanStack Store atom 存储外部传入的 atom 与内部 atom 共享同一个 store 实例见 reactivity.ts这也是atoms选项能做到跨组件细粒度订阅的底层原因。七、进阶把拖拽移出 React 渲染路径的高性能方案在 React 中构建大型或复杂表格时onChange模式意味着每拖一帧就可能重渲染整张表。仓库中的 column-resizing-performant 示例 展示了如何把拖拽完全移出 React 的渲染路径让即使单元格渲染很昂贵的表格也能平滑拖动。完整实现见 main.tsx核心思路分三步表格组件不订阅任何 resize 状态。给useTable传一个返回常量的 selector示例用() ({})任何状态变化都不会触发“拥有表格的组件”重渲染const table useTable( { features, columns, data, columnResizeMode: onChange /* ... */ }, () ({}), // subscribe to nothing )列宽以 CSS 变量命令式写入。在useLayoutEffect中订阅table.atoms.columnSizing直接把--header-id-size、--col-id-size变量写到table元素上单元格引用width: calc(var(--col-firstName-size) * 1px)。浏览器逐帧应用新宽度时 React 零参与源码层已经保证了每帧最多一次更新React.useLayoutEffect(() { const writeColumnSizeVars () { const tableEl tableRef.current if (!tableEl) return for (const header of table.getFlatHeaders()) { tableEl.style.setProperty(--header-${header.id}-size, String(header.getSize())) tableEl.style.setProperty(--col-${header.column.id}-size, String(header.column.getSize())) } tableEl.style.width ${table.getTotalSize()}px } writeColumnSizeVars() // initial paint const { unsubscribe } table.atoms.columnSizing.subscribe(writeColumnSizeVars) return () unsubscribe() }, [])必须反应的东西隔离到table.Subscribe小岛。当前活跃 resizer 的高亮、实时状态读数等各自只订阅所需的最小切片。例如每个 resizer 用一个table.Subscribe只订阅state.columnResizing.isResizingColumn header.column.id这个布尔值拖拽期间只有正在被拖的那一个小岛重渲染见 main.tsx。这套方案取代了早期“拖拽时 memo 化表体”的写法因为表体不再订阅 resize 状态它根本不需要 memo——只有当数据本身变化时它才重渲染。示例的TableBody还顺带利用了content-visibility: auto让屏外行跳过样式重算与布局见 main.tsx进一步压缩了拖拽期间的浏览器布局成本。该示例默认数据 200 行并提供 5000 行“Stress Test”按钮用于直观验证性能。八、关键文件与延伸阅读资源路径核心 feature 定义默认选项、API 挂载packages/table-core/src/features/column-resizing/columnResizingFeature.ts拖拽处理、事件清理、合帧逻辑packages/table-core/src/features/column-resizing/columnResizingFeature.utils.tscolumnResizingState与各选项类型packages/table-core/src/features/column-resizing/columnResizingFeature.types.ts基础示例table / div / 绝对定位三种布局examples/react/column-resizing/src/main.tsx高性能示例CSS 变量 Subscribe 岛examples/react/column-resizing-performant/src/main.tsx列宽定义size/minSize/maxSizeColumn Sizing 指南表格状态与 atom 对比Table State 指南适用前提小结以上 API 与行为以当前仓库packages/react-table与packages/table-core的实现为准columnResizeMode默认onEnd、columnResizeDirection默认ltr、enableColumnResizing与enableResizing默认均为启用。拖拽提交走的是columnSizing状态临时拖拽信息走columnResizing状态两者分离是理解本文所有性能优化的关键——拖拽的“过程”尽量不触发渲染拖拽的“结果”才提交进列宽状态。【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址: https://gitcode.com/gh_mirrors/ta/table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TanStack React Table 列宽调整（Column Resizing）实战指南：从拖拽交互到零重渲染的高性能方案
TanStack React Table 列宽调整Column Resizing实战指南从拖拽交互到零重渲染的高性能方案【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址: https://gitcode.com/gh_mirrors/ta/table本文基于 TanStack Table 仓库中 React 适配器的官方指南 Column Resizing Guide系统讲解如何在tanstack/react-table中启用并定制列宽拖拽调整功能包括功能依赖关系、columnResizeMode提交时机、columnResizeDirection方向控制、尺寸与拖拽 API 的完整用法以及拖拽过程态columnResizingstate的外部 atom 托管方案最后结合核心包 columnResizingFeature 的源码实现剖析拖拽事件合帧、触控事件清理等底层细节并给出仓库中“零 React 重渲染”高性能示例的完整思路。一、功能依赖先装 Column Sizing再装 Column Resizing列宽调整功能构建在列宽定义column sizing能力之上因此功能注册顺序必须是columnSizingFeature在前、columnResizingFeature在后。两个 feature 都是纯逻辑插件通过tableFeatures()组合后传入useTableimport { useTable, tableFeatures, columnSizingFeature, columnResizingFeature, } from tanstack/react-table const features tableFeatures({ columnSizingFeature, columnResizingFeature, }) const table useTable({ features, columns, data, })在核心包中columnResizingFeature通过assignColumnPrototype与assignHeaderPrototype给列和表头挂载getCanResize()、getIsResizing()、getResizeHandler()等 API并通过constructTableAPIs挂上setColumnResizing和resetHeaderSizeInfo见 columnResizingFeature.ts。如果只需要定义初始宽度、最小/最大宽度而不需要拖拽可参见同目录的 Column Sizing 指南。可运行的完整示例见仓库中的 column-resizing 示例其入口文件 main.tsx 同时演示了语义化table、Flexbox 布局的div表格和绝对定位div表格三种表格骨架下应用列宽的写法。二、启用与禁用拖拽全局与逐列两级开关启用列宽调整只需把上面两个 feature 加入features。column.getCanResize()默认对所有列返回true但存在两级关闭手段表级选项enableColumnResizing一次禁用整张表的所有列拖拽列级选项enableResizing只禁用某一列同时可用size直接设定该列起始宽度。import { columnResizingFeature, columnSizingFeature, tableFeatures, useTable, } from tanstack/react-table const features tableFeatures({ columnSizingFeature, columnResizingFeature, }) const columns [ { accessorKey: id, enableResizing: false, // disable resizing for just this column size: 200, // starting column size }, //... ] const table useTable({ features, columns, data, })从源码看判定逻辑非常直接enableResizing ?? true与enableColumnResizing ?? true两个开关做逻辑与任一为false即不可拖拽见 columnResizingFeature.utils.ts。类型定义中也确认了两个开关的默认值均为启用见 columnResizingFeature.types.ts。三、columnResizeMode宽度何时“落盘”columnResizeMode决定拖拽过程中列宽提交时机核心包中的默认值为onEnd见 columnResizingFeature.tsonEnd默认column.getSize()在用户松手拖拽结束之前不会返回新宽度拖拽期间通常只显示一个指示器indicator跟随鼠标。在 React 中复杂表格的每次拖拽帧都可能触发整表重渲染onEnd模式能显著避免拖拽过程中的卡顿与掉帧。这并不是说 React 做不到 60 fps 的实时拖拽渲染而是要达到该效果往往需要额外的 memo 化或性能优化。onChange拖拽的每一帧都立即提交新列宽column.getSize()实时变化视觉反馈最跟手。通过表级选项columnResizeMode切换const table useTable({ //... columnResizeMode: onChange, // change column resize mode to onChange })示例工程 column-resizing 提供了下拉框可以运行时在onEnd与onChange之间切换直观对比两种模式下的渲染行为。onEnd模式下的拖拽指示器偏移量由临时状态table.state.columnResizing.deltaOffset提供示例中据此对 resizer 元素做translateX位移见 main.tsx。四、columnResizeDirection适配 RTL 布局TanStack Table 默认按从左到右left-to-right的方向计算拖拽偏移。如果你的界面是阿拉伯语、希伯来语等 RTLright-to-left排版需要把拖拽方向改为rtl使向右拖拽产生“变窄”而非“变宽”的直觉效果const table useTable({ //... columnResizeDirection: rtl, // change column resize direction to rtl for certain locales })源码中该选项直接影响偏移计算的方向因子columnResizeDirection rtl ? -1 : 1deltaOffset会乘以该因子见 columnResizingFeature.utils.ts。示例工程同样提供了ltr/rtl的运行时切换见 main.tsx并且外层容器会同步设置style{{ direction }}让 CSS 排版与拖拽方向保持一致。五、把尺寸应用到 UISize 系列 API将列宽真正作用到表头单元格、数据单元格或页脚单元格上有以下三个等价的取宽 APIheader.getSize() column.getSize() cell.column.getSize()具体如何写进标记markup由你自己决定最常见的是内联样式或 CSS 变量两种方式。内联样式的最小写法th key{header.id} colSpan{header.colSpan} style{{ width: ${header.getSize()}px }} 示例工程中th、td分别使用header.getSize()与cell.column.getSize()设置宽度见 main.tsx。而在绝对定位布局里还会结合header.getStart()/cell.column.getStart()计算left值实现像素级对齐。考虑到后文性能章节如果表格较复杂建议改用 CSS 变量来应用列宽。六、把拖拽挂到 UIResize 系列 API6.1 getResizeHandler一个 handler 同时支持鼠标与触控TanStack Table 提供了预置事件处理函数内部完成“记录起点 → 监听拖拽 → 更新临时状态 → 按模式提交宽度”的完整流程你只需把它挂到 resize handle 上ColumnResizeHandle onMouseDown{header.getResizeHandler()} // for desktop onTouchStart{header.getResizeHandler()} // for mobile /从 header_getResizeHandler 的源码可以看到它的完整行为记录起点按下时捕获startOffsetclientX、startSize并把所有叶子表头的当前宽度快照到columnSizingStart支持表头组——拖动分组表头会同时改变组内所有叶子列鼠标路径在 document 上注册mousemove/mouseupmouseup时自动移除监听并执行onEnd提交触控路径注册touchmove/touchend并对touchmove调用preventDefault阻止页面滚动同时注册了touchcancel处理器——当浏览器系统手势接管滚动、切换标签页等时touchend不会触发源码通过touchcancel保证监听器不会永久泄漏合帧优化指针设备上报频率常高于屏幕刷新率源码用requestAnimationFrame把同帧内的多次move合并为一次状态更新——第一帧立即应用其余挂起等待下一帧批量处理见 utils 第 182-212 行。这意味着即使你在 UI 层不做任何优化核心层已经保证“每动画帧最多一次状态写入”提交时机每次更新在table._reactivity.batch(...)中完成把“临时状态写入 列宽提交”合并在一次通知冲刷里onEnd提交与状态复位也合并在同一个 batch 中见 utils 第 221-237 行。多指触控会被忽略event.touches.length 1直接返回避免双指缩放误触发拖拽。6.2 状态与判定 API拖拽过程中的判定和临时状态操作 APIheader.getResizeHandler() // 绑定拖拽 column.getCanResize() // 是否渲染 resize handle column.getIsResizing() // 是否正在拖拽该列表格实例层面table.setColumnResizing((old) ({ ...old, deltaOffset: 12, })) table.resetHeaderSizeInfo() table.resetHeaderSizeInfo(true)resetHeaderSizeInfo()把columnResizing重置回initialState.columnResizing的克隆传入true则忽略 initial state直接回到“无拖拽”的默认状态实现见 table_resetHeaderSizeInfo。6.3 用 columnResizing 状态渲染拖拽指示器TanStack Table 维护了一个columnResizing状态对象你可以据此渲染拖拽指示器ColumnResizeIndicator style{{ transform: header.column.getIsResizing() ? translateX(${table.state.columnResizing.deltaOffset ?? 0}px) : , }} /该状态对象是纯临时的拖拽信息完整结构如下与 columnResizingState 类型定义 一致type columnResizingState { columnSizingStart: Array[string, number] // 拖拽开始时各叶子列的 [id, size] 快照 deltaOffset: null | number // 当前像素级偏移 deltaPercentage: null | number // 相对起始宽度的百分比偏移 isResizingColumn: false | string // 正在拖拽的列 id startOffset: null | number // 指针起始 clientX startSize: null | number // 起始列宽 }大多数场景你不需要手工管理这份临时状态。如果你确实需要——例如在表格组件之外的其他组件中观察拖拽状态——推荐的 v9 做法是外部 atom把它作为 table 的atoms选项传入。外部 atom 允许在应用任意位置做细粒度订阅其他代码可以观察 resize 状态而不需要触发“拥有”表格的组件重渲染import { useCreateAtom, useSelector } from tanstack/react-store import type { columnResizingState } from tanstack/react-table const columnResizingAtom useCreateAtomcolumnResizingState({ columnSizingStart: [], deltaOffset: null, deltaPercentage: null, isResizingColumn: false, startOffset: null, startSize: null, }) const columnResizing useSelector(columnResizingAtom) // subscribe wherever it is needed const table useTable({ features, columns, data, atoms: { columnResizing: columnResizingAtom, }, })作为替代v8 风格的state.columnResizingonColumnResizingChange受控模式仍然被支持适合简单集成或迁移 v8 代码只是细粒度不如外部 atom。更多对比可参考 Table State 指南const [columnResizing, setColumnResizing] useStatecolumnResizingState({ columnSizingStart: [], deltaOffset: null, deltaPercentage: null, isResizingColumn: false, startOffset: null, startSize: null, }) const table useTable({ features, columns, data, state: { columnResizing, }, onColumnResizingChange: setColumnResizing, })在 React 适配器中表格内部状态全部以 TanStack Store atom 存储外部传入的 atom 与内部 atom 共享同一个 store 实例见 reactivity.ts这也是atoms选项能做到跨组件细粒度订阅的底层原因。七、进阶把拖拽移出 React 渲染路径的高性能方案在 React 中构建大型或复杂表格时onChange模式意味着每拖一帧就可能重渲染整张表。仓库中的 column-resizing-performant 示例 展示了如何把拖拽完全移出 React 的渲染路径让即使单元格渲染很昂贵的表格也能平滑拖动。完整实现见 main.tsx核心思路分三步表格组件不订阅任何 resize 状态。给useTable传一个返回常量的 selector示例用() ({})任何状态变化都不会触发“拥有表格的组件”重渲染const table useTable( { features, columns, data, columnResizeMode: onChange /* ... */ }, () ({}), // subscribe to nothing )列宽以 CSS 变量命令式写入。在useLayoutEffect中订阅table.atoms.columnSizing直接把--header-id-size、--col-id-size变量写到table元素上单元格引用width: calc(var(--col-firstName-size) * 1px)。浏览器逐帧应用新宽度时 React 零参与源码层已经保证了每帧最多一次更新React.useLayoutEffect(() { const writeColumnSizeVars () { const tableEl tableRef.current if (!tableEl) return for (const header of table.getFlatHeaders()) { tableEl.style.setProperty(--header-${header.id}-size, String(header.getSize())) tableEl.style.setProperty(--col-${header.column.id}-size, String(header.column.getSize())) } tableEl.style.width ${table.getTotalSize()}px } writeColumnSizeVars() // initial paint const { unsubscribe } table.atoms.columnSizing.subscribe(writeColumnSizeVars) return () unsubscribe() }, [])必须反应的东西隔离到table.Subscribe小岛。当前活跃 resizer 的高亮、实时状态读数等各自只订阅所需的最小切片。例如每个 resizer 用一个table.Subscribe只订阅state.columnResizing.isResizingColumn header.column.id这个布尔值拖拽期间只有正在被拖的那一个小岛重渲染见 main.tsx。这套方案取代了早期“拖拽时 memo 化表体”的写法因为表体不再订阅 resize 状态它根本不需要 memo——只有当数据本身变化时它才重渲染。示例的TableBody还顺带利用了content-visibility: auto让屏外行跳过样式重算与布局见 main.tsx进一步压缩了拖拽期间的浏览器布局成本。该示例默认数据 200 行并提供 5000 行“Stress Test”按钮用于直观验证性能。八、关键文件与延伸阅读资源路径核心 feature 定义默认选项、API 挂载packages/table-core/src/features/column-resizing/columnResizingFeature.ts拖拽处理、事件清理、合帧逻辑packages/table-core/src/features/column-resizing/columnResizingFeature.utils.tscolumnResizingState与各选项类型packages/table-core/src/features/column-resizing/columnResizingFeature.types.ts基础示例table / div / 绝对定位三种布局examples/react/column-resizing/src/main.tsx高性能示例CSS 变量 Subscribe 岛examples/react/column-resizing-performant/src/main.tsx列宽定义size/minSize/maxSizeColumn Sizing 指南表格状态与 atom 对比Table State 指南适用前提小结以上 API 与行为以当前仓库packages/react-table与packages/table-core的实现为准columnResizeMode默认onEnd、columnResizeDirection默认ltr、enableColumnResizing与enableResizing默认均为启用。拖拽提交走的是columnSizing状态临时拖拽信息走columnResizing状态两者分离是理解本文所有性能优化的关键——拖拽的“过程”尽量不触发渲染拖拽的“结果”才提交进列宽状态。【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址: https://gitcode.com/gh_mirrors/ta/table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考