Alpine 表格列宽设置Column Sizing完整指南基于 tanstack/alpine-table 的尺寸测量、API 与状态管理【免费下载链接】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列宽设置Column Sizing是 TanStack Table 系列中负责静态列宽测量的核心能力它让每一列拥有可配置的size、minSize与maxSize并通过表格状态向外暴露一套完整的读取 API。本指南以 docs/framework/alpine/guide/column-sizing.md 为骨架结合 tanstack/alpine-table 适配器与 tanstack/table-core 底层实现讲解如何在 Alpine 应用中启用该特性、把测量结果应用到任意布局以及用外部 atom 或经典受控状态管理列宽。读完你可以在自己的 Alpine 表格中实现静态定宽、分组表头宽度求和、固定列偏移计算以及用户列宽的持久化。一、功能概览先看可运行的示例官方仓库在 examples/alpine/column-sizing 提供了一个可直接运行的 Alpine 示例。它的入口 src/main.ts 展示了完整接入流程通过tableFeatures({ columnSizingFeature, columnResizingFeature })组合特性示例还同时引入了 column-resizing便于拖拽改宽用Alpine.data(table, ...)注册组件并通过一个 getter 把响应式数据喂给表格const features tableFeatures({ columnSizingFeature, columnResizingFeature, }) const table createTable({ features, columns, get data() { return local.data // 通过 getter 读取响应式数据表格才能感知更新 }, // initialState: { columnSizing: { firstName: 200 } }, // 首屏预置列宽 // atoms: { columnSizing: columnSizingAtom }, // 推荐外部 atom 自持状态 // state: { columnSizing }, // 经典受控状态 // onColumnSizingChange: setColumnSizing, })值得注意的接入细节创建表格时数据源data必须通过 getter 暴露例如用Alpine.reactive兜底这样表格才能在数据变化时感知并重算。示例页面 index.html 里还附带Regenerate Data与Stress Test (1M rows)两个按钮以及一个实时输出table.store.get()状态的pre区域方便观察尺寸状态的变化。二、启用 Column Sizing 特性Column Sizing 是一个可插拔的表格特性需要在创建表格时显式注册import { createTable, tableFeatures, columnSizingFeature, } from tanstack/alpine-table const features tableFeatures({ columnSizingFeature }) const table createTable({ features, columns, get data() { return local.data }, })加入columnSizingFeature之后表格实例、列对象与表头对象上相关的 APIcolumn.getSize()、header.getSize()、table.getTotalSize()等才会被启用。需要说明的是本特性负责的是静态宽度的设定与测量如果希望用户通过拖拽表头动态调整列宽请参阅同目录下的 Column Resizing 指南——拖拽功能依赖本特性提供的尺寸解析逻辑两者通常配合使用。三、默认宽度测量size / minSize / maxSize每列默认拥有一组测量参数定义在table-core的 columnSizingFeature.utils.tsexport const defaultColumnSizing { size: 150, minSize: 20, maxSize: Number.MAX_SAFE_INTEGER, }其含义为列默认宽度 150通常视为像素单位、最小宽度 20、最大宽度不设上限Number.MAX_SAFE_INTEGER。这些默认值可以被两处按顺序覆盖tableOptions.defaultColumn—— 作用于所有列单个列定义column def上的size/minSize/maxSize—— 作用于该列。即优先级为内置默认值 defaultColumn 单列定义。示例const features tableFeatures({ columnSizingFeature }) const columns [ { accessorKey: col1, size: 270, // 单独为这一列指定宽度 }, //... ] const table createTable({ features, defaultColumn: { size: 200, // 所有列的起始宽度 minSize: 50, // 拖拽缩小时的下限 maxSize: 500, // 拖拽放大时的上限 }, //... })从底层看这个优先级在 column_getSize 中体现得淋漓尽致它先查columnSizing状态中是否有该列的已提交覆盖值没有则回退到columnDef.size再没有则使用内置size: 150随后把结果用minSize/maxSize做一次Math.min(Math.max(...))钳制保证任何情况下返回值都落在合法区间内。也就是说状态中的已提交值优先级最高列定义与默认值只是它的兜底。四、Headless 设计状态与布局彻底解耦需要反复强调的一点是TanStack Table 是 headless 工具库列宽逻辑真的只是一组状态值不包含任何渲染与布局实现。宽度数值默认以像素单位存入表格状态ColumnSizingState即Recordstring, number见 columnSizingFeature.types.ts但你可以把这些数值接到任何布局机制上语义化table元素或任何以表格 CSS 模式显示的元素div/span元素或任何以非表格 CSS 模式显示的元素带严格宽度的块级元素block strict widths带严格宽度的绝对定位元素absolutely positioned带松散宽度的 Flexbox 定位元素flex loose widths带松散宽度的 Grid 定位元素grid loose widths以及任何能把单元格宽度插值成表格结构的布局方案。每种方案在溢出处理、粘性定位、百分比宽度等方面各有取舍这些取舍通常由上层 UI 组件库或设计系统来决定——这正是 headless 架构想替使用者卸下的包袱。五、把测量值应用到你的标记Markup要把计算出的宽度应用到 DOM只需在 Alpine 绑定中读取header.getSize()或column.getSize()。因为 Alpine 绑定中的表格读取是响应式的见下文响应式原理尺寸状态一旦变化宽度会自动更新。最常用的写法是用内联:style把尺寸插值为像素宽度table :stylewidth: table.getCenterTotalSize() px thead template x-forheaderGroup in table.getHeaderGroups() :keyheaderGroup.id tr template x-forheader in headerGroup.headers :keyheader.id th :colspanheader.colSpan :stylewidth: header.getSize() px template x-if!header.isPlaceholder span x-htmlFlexRender({ header })/span /template /th /template /tr /template /thead tbody template x-forrow in table.getRowModel().rows :keyrow.id tr template x-forcell in row.getAllCells() :keycell.id td :stylewidth: cell.column.getSize() px span x-htmlFlexRender({ cell })/span /td /template /tr /template /tbody /table官方示例 index.html 采用的就是这一模式并且只渲染table.getRowModel().rows.slice(0, 10)来控制 DOM 规模。关于响应式原理Alpine 适配器的 createTable 通过一个版本计数器把表格读取桥接进Alpine.reactive——默认情况下任何状态变化都会让所有触及表格的 Alpine 绑定重新求值如果追求极致性能可以传入selector函数让计数器只在所选状态切片浅比较变化时才递增高频更新的列宽状态则可配合table.atoms.slice.subscribe()做精细的副作用处理。六、Column Sizing API 详解6.1 列与表头读取 API尺寸测量相关的 API 在 columnSizingFeature.ts 中统一注册到列、表头与表格实例上column.getSize() // 该列当前解析出的尺寸含 min/max 钳制 header.getSize() // 该表头渲染尺寸分组表头为叶子列求和 column.getStart() // 当前列流中本列的起始偏移 column.getStart(start) // 在 start 固定区域内测量 column.getStart(center) // 在 center未固定区域内测量 column.getStart(end) // 在 end 固定区域内测量 column.getAfter() // 当前列流中本列的结束偏移 column.getAfter(start) column.getAfter(center) column.getAfter(end) column.resetSize() // 清除该列的已提交尺寸覆盖回到列定义/默认值其中getStart/getAfter的实现值得展开table_getColumnOffsets见 columnSizingFeature.utils.ts会对全部可见叶子列以及start/center/end三个固定区域分别构建一次偏移表buildColumnOffsets前向累加starts、反向累加afters并作为表格级 memo 缓存使所有getStart()/getAfter()调用退化为 O(1) 查表。position参数指定在哪个区域固定区内测量start/end是逻辑方向——LTR 布局中start通常对应左侧、end对应右侧RTL 布局则相反。header.getSize()的语义与列不同它是从叶子列向上递归求和的。源码sumHeaderSize见 columnSizingFeature.utils.ts表明叶子表头返回其列的当前尺寸分组表头则递归累加所有子孙叶子列的尺寸——这正是分组表头header groups场景下渲染宽度正确的关键。6.2 表格级总宽 API表格实例还暴露一组总尺寸辅助方法适合构建滚动容器、拆分固定列表格或给 CSS 变量提供列宽table.getTotalSize() // 主表头行全部列start center end的总宽 table.getStartTotalSize() // start 固定区域的总宽 table.getCenterTotalSize() // center 未固定区域的总宽 table.getEndTotalSize() // end 固定区域的总宽底层实现见 columnSizingFeature.utils.ts都是对对应表头组内每个表头执行header_getSize并求和空区域返回 0。典型用法就是把table.getCenterTotalSize()绑到table或滚动容器的宽度上如官方示例所示。6.3 直接更新与重置如果需要在运行时直接改宽度状态使用table.setColumnSizing重置则用table.resetColumnSizing——不带参数时重置为initialState.columnSizing传true时重置为特性默认的空对象table.setColumnSizing({ firstName: 180, age: 80, }) table.resetColumnSizing() table.resetColumnSizing(true)注意setColumnSizing的 updater 既可以是一份新的尺寸映射也可以是(old) newMap函数见 table_setColumnSizing。而column.resetSize()本质上是对setColumnSizing的一次包装把目标列从已提交映射中剔除见 column_resetSize官方示例中双击表头分隔条即调用它。七、管理 Column Sizing 状态7.1 推荐外部 Atomv9 风格如果希望自己持有columnSizing状态——例如要持久化用户设置的列宽——v9 推荐的做法是向表格的atoms选项传入外部 atom。外部 atom 能在应用任意位置提供细粒度订阅其他代码无需经过持有表格的组件即可读写尺寸状态。tanstack/store本来就是tanstack/alpine-table的依赖因此createAtom开箱即用Alpine 适配器的 reactivity.ts 正是基于 TanStack Store 的 atom 实现响应式绑定import { createAtom } from tanstack/store import type { ColumnSizingState } from tanstack/alpine-table const features tableFeatures({ columnSizingFeature }) const columnSizingAtom createAtomColumnSizingState({}) // 在需要的地方订阅例如把宽度写入 localStorage columnSizingAtom.subscribe(() { // react to sizing changes (e.g. persist widths) }) const table createTable({ features, columns, get data() { return local.data }, atoms: { columnSizing: columnSizingAtom, }, })7.2 兼容方案受控 state onColumnSizingChangev8 风格v8 风格的state.columnSizing配合onColumnSizingChange模式依然受支持——通过Alpine.reactive持有该状态切片。它对简单集成或迁移旧代码很方便但粒度和灵活性不如外部 atom。两种方案的深入对比可参考 Table State 指南。const features tableFeatures({ columnSizingFeature }) const local Alpine.reactive({ columnSizing: {} as ColumnSizingState }) const table createTable({ features, columns, get data() { return local.data }, state: { get columnSizing() { return local.columnSizing // 把响应式切片接回表格 }, }, onColumnSizingChange: (updater) { local.columnSizing typeof updater function ? updater(local.columnSizing) : updater }, })从类型定义看onColumnSizingChange的类型是OnChangeFnColumnSizingState见 columnSizingFeature.types.ts它与state.columnSizing成对出现而外部 atom 方案可以完全不需要该回调atom 自身即状态源。table_resetColumnSizing的细节也印证了这一点无参重置时克隆table.initialState.columnSizing传true则忽略初始状态、直接重置为{}见 table_resetColumnSizing。八、与 Column Resizing 的协同Column Sizing 与 Column Resizing 是两个互补但职责不同的特性前者定义列应该多宽静态测量后者定义用户如何拖拽改变宽度交互与增量计算。从 columnResizingFeature.utils.ts 可以看出resizing 特性直接复用了column_getSize/header_getSize/table_setColumnSizing等 sizing 工具拖拽开始时记录columnSizingStart起点拖拽过程中按columnResizeMode如onChange持续把新值写回提交态而每次写入都会走 sizing 的钳制逻辑因此minSize/maxSize在拖拽时同样生效。官方 Column Resizing 指南 对此有完整讲解一个常见实践是把两者一起加入tableFeatures让静态定宽与交互调整能力同时具备。结语Column Sizing 是 TanStack Table 列宽体系的地基一组被min/max钳制的纯状态数值加上从列、表头到表格实例的完整读取 API足以支撑静态定宽、分组表头求和、固定列偏移测量与滚动容器宽度计算等场景。在 Alpine 适配器中这些读取天然响应式地接入绑定而状态所有权既可以用 v9 的外部 atom 精细掌控也可以用 v8 的受控回调平滑迁移。动手实践时直接运行 examples/alpine/column-sizing 示例结合 columnSizingFeature.utils.ts 阅读即可把每一处 API 的语义落到实现细节上。【免费下载链接】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），仅供参考
Alpine 表格列宽设置（Column Sizing）完整指南：基于 @tanstack/alpine-table 的尺寸测量、API 与状态管理
Alpine 表格列宽设置Column Sizing完整指南基于 tanstack/alpine-table 的尺寸测量、API 与状态管理【免费下载链接】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列宽设置Column Sizing是 TanStack Table 系列中负责静态列宽测量的核心能力它让每一列拥有可配置的size、minSize与maxSize并通过表格状态向外暴露一套完整的读取 API。本指南以 docs/framework/alpine/guide/column-sizing.md 为骨架结合 tanstack/alpine-table 适配器与 tanstack/table-core 底层实现讲解如何在 Alpine 应用中启用该特性、把测量结果应用到任意布局以及用外部 atom 或经典受控状态管理列宽。读完你可以在自己的 Alpine 表格中实现静态定宽、分组表头宽度求和、固定列偏移计算以及用户列宽的持久化。一、功能概览先看可运行的示例官方仓库在 examples/alpine/column-sizing 提供了一个可直接运行的 Alpine 示例。它的入口 src/main.ts 展示了完整接入流程通过tableFeatures({ columnSizingFeature, columnResizingFeature })组合特性示例还同时引入了 column-resizing便于拖拽改宽用Alpine.data(table, ...)注册组件并通过一个 getter 把响应式数据喂给表格const features tableFeatures({ columnSizingFeature, columnResizingFeature, }) const table createTable({ features, columns, get data() { return local.data // 通过 getter 读取响应式数据表格才能感知更新 }, // initialState: { columnSizing: { firstName: 200 } }, // 首屏预置列宽 // atoms: { columnSizing: columnSizingAtom }, // 推荐外部 atom 自持状态 // state: { columnSizing }, // 经典受控状态 // onColumnSizingChange: setColumnSizing, })值得注意的接入细节创建表格时数据源data必须通过 getter 暴露例如用Alpine.reactive兜底这样表格才能在数据变化时感知并重算。示例页面 index.html 里还附带Regenerate Data与Stress Test (1M rows)两个按钮以及一个实时输出table.store.get()状态的pre区域方便观察尺寸状态的变化。二、启用 Column Sizing 特性Column Sizing 是一个可插拔的表格特性需要在创建表格时显式注册import { createTable, tableFeatures, columnSizingFeature, } from tanstack/alpine-table const features tableFeatures({ columnSizingFeature }) const table createTable({ features, columns, get data() { return local.data }, })加入columnSizingFeature之后表格实例、列对象与表头对象上相关的 APIcolumn.getSize()、header.getSize()、table.getTotalSize()等才会被启用。需要说明的是本特性负责的是静态宽度的设定与测量如果希望用户通过拖拽表头动态调整列宽请参阅同目录下的 Column Resizing 指南——拖拽功能依赖本特性提供的尺寸解析逻辑两者通常配合使用。三、默认宽度测量size / minSize / maxSize每列默认拥有一组测量参数定义在table-core的 columnSizingFeature.utils.tsexport const defaultColumnSizing { size: 150, minSize: 20, maxSize: Number.MAX_SAFE_INTEGER, }其含义为列默认宽度 150通常视为像素单位、最小宽度 20、最大宽度不设上限Number.MAX_SAFE_INTEGER。这些默认值可以被两处按顺序覆盖tableOptions.defaultColumn—— 作用于所有列单个列定义column def上的size/minSize/maxSize—— 作用于该列。即优先级为内置默认值 defaultColumn 单列定义。示例const features tableFeatures({ columnSizingFeature }) const columns [ { accessorKey: col1, size: 270, // 单独为这一列指定宽度 }, //... ] const table createTable({ features, defaultColumn: { size: 200, // 所有列的起始宽度 minSize: 50, // 拖拽缩小时的下限 maxSize: 500, // 拖拽放大时的上限 }, //... })从底层看这个优先级在 column_getSize 中体现得淋漓尽致它先查columnSizing状态中是否有该列的已提交覆盖值没有则回退到columnDef.size再没有则使用内置size: 150随后把结果用minSize/maxSize做一次Math.min(Math.max(...))钳制保证任何情况下返回值都落在合法区间内。也就是说状态中的已提交值优先级最高列定义与默认值只是它的兜底。四、Headless 设计状态与布局彻底解耦需要反复强调的一点是TanStack Table 是 headless 工具库列宽逻辑真的只是一组状态值不包含任何渲染与布局实现。宽度数值默认以像素单位存入表格状态ColumnSizingState即Recordstring, number见 columnSizingFeature.types.ts但你可以把这些数值接到任何布局机制上语义化table元素或任何以表格 CSS 模式显示的元素div/span元素或任何以非表格 CSS 模式显示的元素带严格宽度的块级元素block strict widths带严格宽度的绝对定位元素absolutely positioned带松散宽度的 Flexbox 定位元素flex loose widths带松散宽度的 Grid 定位元素grid loose widths以及任何能把单元格宽度插值成表格结构的布局方案。每种方案在溢出处理、粘性定位、百分比宽度等方面各有取舍这些取舍通常由上层 UI 组件库或设计系统来决定——这正是 headless 架构想替使用者卸下的包袱。五、把测量值应用到你的标记Markup要把计算出的宽度应用到 DOM只需在 Alpine 绑定中读取header.getSize()或column.getSize()。因为 Alpine 绑定中的表格读取是响应式的见下文响应式原理尺寸状态一旦变化宽度会自动更新。最常用的写法是用内联:style把尺寸插值为像素宽度table :stylewidth: table.getCenterTotalSize() px thead template x-forheaderGroup in table.getHeaderGroups() :keyheaderGroup.id tr template x-forheader in headerGroup.headers :keyheader.id th :colspanheader.colSpan :stylewidth: header.getSize() px template x-if!header.isPlaceholder span x-htmlFlexRender({ header })/span /template /th /template /tr /template /thead tbody template x-forrow in table.getRowModel().rows :keyrow.id tr template x-forcell in row.getAllCells() :keycell.id td :stylewidth: cell.column.getSize() px span x-htmlFlexRender({ cell })/span /td /template /tr /template /tbody /table官方示例 index.html 采用的就是这一模式并且只渲染table.getRowModel().rows.slice(0, 10)来控制 DOM 规模。关于响应式原理Alpine 适配器的 createTable 通过一个版本计数器把表格读取桥接进Alpine.reactive——默认情况下任何状态变化都会让所有触及表格的 Alpine 绑定重新求值如果追求极致性能可以传入selector函数让计数器只在所选状态切片浅比较变化时才递增高频更新的列宽状态则可配合table.atoms.slice.subscribe()做精细的副作用处理。六、Column Sizing API 详解6.1 列与表头读取 API尺寸测量相关的 API 在 columnSizingFeature.ts 中统一注册到列、表头与表格实例上column.getSize() // 该列当前解析出的尺寸含 min/max 钳制 header.getSize() // 该表头渲染尺寸分组表头为叶子列求和 column.getStart() // 当前列流中本列的起始偏移 column.getStart(start) // 在 start 固定区域内测量 column.getStart(center) // 在 center未固定区域内测量 column.getStart(end) // 在 end 固定区域内测量 column.getAfter() // 当前列流中本列的结束偏移 column.getAfter(start) column.getAfter(center) column.getAfter(end) column.resetSize() // 清除该列的已提交尺寸覆盖回到列定义/默认值其中getStart/getAfter的实现值得展开table_getColumnOffsets见 columnSizingFeature.utils.ts会对全部可见叶子列以及start/center/end三个固定区域分别构建一次偏移表buildColumnOffsets前向累加starts、反向累加afters并作为表格级 memo 缓存使所有getStart()/getAfter()调用退化为 O(1) 查表。position参数指定在哪个区域固定区内测量start/end是逻辑方向——LTR 布局中start通常对应左侧、end对应右侧RTL 布局则相反。header.getSize()的语义与列不同它是从叶子列向上递归求和的。源码sumHeaderSize见 columnSizingFeature.utils.ts表明叶子表头返回其列的当前尺寸分组表头则递归累加所有子孙叶子列的尺寸——这正是分组表头header groups场景下渲染宽度正确的关键。6.2 表格级总宽 API表格实例还暴露一组总尺寸辅助方法适合构建滚动容器、拆分固定列表格或给 CSS 变量提供列宽table.getTotalSize() // 主表头行全部列start center end的总宽 table.getStartTotalSize() // start 固定区域的总宽 table.getCenterTotalSize() // center 未固定区域的总宽 table.getEndTotalSize() // end 固定区域的总宽底层实现见 columnSizingFeature.utils.ts都是对对应表头组内每个表头执行header_getSize并求和空区域返回 0。典型用法就是把table.getCenterTotalSize()绑到table或滚动容器的宽度上如官方示例所示。6.3 直接更新与重置如果需要在运行时直接改宽度状态使用table.setColumnSizing重置则用table.resetColumnSizing——不带参数时重置为initialState.columnSizing传true时重置为特性默认的空对象table.setColumnSizing({ firstName: 180, age: 80, }) table.resetColumnSizing() table.resetColumnSizing(true)注意setColumnSizing的 updater 既可以是一份新的尺寸映射也可以是(old) newMap函数见 table_setColumnSizing。而column.resetSize()本质上是对setColumnSizing的一次包装把目标列从已提交映射中剔除见 column_resetSize官方示例中双击表头分隔条即调用它。七、管理 Column Sizing 状态7.1 推荐外部 Atomv9 风格如果希望自己持有columnSizing状态——例如要持久化用户设置的列宽——v9 推荐的做法是向表格的atoms选项传入外部 atom。外部 atom 能在应用任意位置提供细粒度订阅其他代码无需经过持有表格的组件即可读写尺寸状态。tanstack/store本来就是tanstack/alpine-table的依赖因此createAtom开箱即用Alpine 适配器的 reactivity.ts 正是基于 TanStack Store 的 atom 实现响应式绑定import { createAtom } from tanstack/store import type { ColumnSizingState } from tanstack/alpine-table const features tableFeatures({ columnSizingFeature }) const columnSizingAtom createAtomColumnSizingState({}) // 在需要的地方订阅例如把宽度写入 localStorage columnSizingAtom.subscribe(() { // react to sizing changes (e.g. persist widths) }) const table createTable({ features, columns, get data() { return local.data }, atoms: { columnSizing: columnSizingAtom, }, })7.2 兼容方案受控 state onColumnSizingChangev8 风格v8 风格的state.columnSizing配合onColumnSizingChange模式依然受支持——通过Alpine.reactive持有该状态切片。它对简单集成或迁移旧代码很方便但粒度和灵活性不如外部 atom。两种方案的深入对比可参考 Table State 指南。const features tableFeatures({ columnSizingFeature }) const local Alpine.reactive({ columnSizing: {} as ColumnSizingState }) const table createTable({ features, columns, get data() { return local.data }, state: { get columnSizing() { return local.columnSizing // 把响应式切片接回表格 }, }, onColumnSizingChange: (updater) { local.columnSizing typeof updater function ? updater(local.columnSizing) : updater }, })从类型定义看onColumnSizingChange的类型是OnChangeFnColumnSizingState见 columnSizingFeature.types.ts它与state.columnSizing成对出现而外部 atom 方案可以完全不需要该回调atom 自身即状态源。table_resetColumnSizing的细节也印证了这一点无参重置时克隆table.initialState.columnSizing传true则忽略初始状态、直接重置为{}见 table_resetColumnSizing。八、与 Column Resizing 的协同Column Sizing 与 Column Resizing 是两个互补但职责不同的特性前者定义列应该多宽静态测量后者定义用户如何拖拽改变宽度交互与增量计算。从 columnResizingFeature.utils.ts 可以看出resizing 特性直接复用了column_getSize/header_getSize/table_setColumnSizing等 sizing 工具拖拽开始时记录columnSizingStart起点拖拽过程中按columnResizeMode如onChange持续把新值写回提交态而每次写入都会走 sizing 的钳制逻辑因此minSize/maxSize在拖拽时同样生效。官方 Column Resizing 指南 对此有完整讲解一个常见实践是把两者一起加入tableFeatures让静态定宽与交互调整能力同时具备。结语Column Sizing 是 TanStack Table 列宽体系的地基一组被min/max钳制的纯状态数值加上从列、表头到表格实例的完整读取 API足以支撑静态定宽、分组表头求和、固定列偏移测量与滚动容器宽度计算等场景。在 Alpine 适配器中这些读取天然响应式地接入绑定而状态所有权既可以用 v9 的外部 atom 精细掌控也可以用 v8 的受控回调平滑迁移。动手实践时直接运行 examples/alpine/column-sizing 示例结合 columnSizingFeature.utils.ts 阅读即可把每一处 API 的语义落到实现细节上。【免费下载链接】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），仅供参考