用途:该技能在 core 与 table-features 基础上,教你通过 columnOrder 状态控制 TanStack Table v9 中未固定叶列的顺序;其他插件仍可决定最终的可视区域布局。
主要能力与用法:注册 columnOrderingFeature,并可通过 initialState.columnOrder 给出初始列 ID 数组,例如 ['name','age','actions']。拖拽重排时以列 ID 作为身份标识,替换整个数组:先 filter 掉 activeId,再 splice 到 overId 位置,最后调用 table.setColumnOrder(next)。
渲染规则:columnOrder 不是最终顺序。固定区域(pinning)与分组模式会在基础排序之后生效;若同时注册 columnVisibilityFeature,应渲染 table.getVisibleLeafColumns() 以同时应用可见性,而不是直接按 columnOrder 渲染。
常见错误(资料标注为 HIGH):一是把状态当作最终顺序(应渲染 table.getAllLeafColumns() 而非 renderIds(columnOrder));二是用表头标签作身份(应使用 column.id,表头可能冲突或变化,而顺序状态存的是稳定叶列 ID);三是原地修改受控状态(应传新数组引用,如 table.setColumnOrder(columnOrder.slice(1)),而非 splice 后传原数组)。
适用场景:需要自定义列顺序、拖拽排序,并同时使用固定列、列可见性或列分组的表格。限制:资料未提供更多平台、费用或完整 API 说明,可查看 node_modules/@tanstack/table-core/dist/features/column-ordering/ 进一步探索。