feat: support column.resizable

[linxianxi]

• RFC: [RFC] Table 支持可伸缩列 ant-design/ant-design#48152

原先内部 onColumnResize 重命名为 onColumnWidthChange，进行区分

Summary by CodeRabbit

• 新功能
  • 表格列支持可调整宽度（resizable），新增列宽调整完成回调以获取被调整列及所有列的最新宽度，表头单元格提供可拖拽调整交互并支持最小宽度与方向适配。
  • 示例更新为基于 hooks 的演示，包含 RTL 切换与内置列调整演示。
• 样式
  • 增加拖拽手柄与调整指示线样式，优化固定列阴影的交互体验。
• 文档
  • 更新 README，新增 resizable 属性说明。
• 测试
  • 添加列宽调整的端到端行为测试，覆盖宽度变化、最小宽度约束与回调验证。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 29, 2025 3:28am

[zombieJ]

体验有点怪异，如果是超出 width 的时候缩小应该就是缩小，不应该把右边的撑开才对。

[zombieJ]

看起来好像没对齐

[XuJin186]

waiting for it😊

[XuJin186]

waiting for it😊

[XuJin186]

waiting for it😊

[AmirrezaAsadpour]

waiting for it😊

[XuJin186]

waiting for it😊

[loi-nguyenhuynh-shopee]

waiting for it😊

[AmirrezaAsadpour]

waiting for it😊

[XuJin186]

waiting for it😊

[ChengYiWu]

waiting for it😊

[XuJin186]

waiting for it😊

[XuJin186]

waiting for it😊

[ilxqx]

waiting for it

[XuJin186]

waiting for it

[AmirrezaAsadpour]

waiting for it😊

[AmirrezaAsadpour]

waiting for it😊

[phobal]

waiting for it，Please merge it

[ilxqx]

antd v6 有没有可能 table 组件基于 TanStack Table 重构呢？我感觉 tanstack table 作为 table 引擎，数据逻辑层面的东西都封装好了，我们只需要基于它做一层很薄的封装即可，剩下的就是样式问题了，而且引入它也不存在依赖剧增的情况（说实话 antd 整个包也不小了），当然这是只是建议，具体看官方怎么决断

[li-jia-nan]

antd v6 有没有可能 table 组件基于 TanStack Table 重构呢？我感觉 tanstack table 作为 table 引擎，数据逻辑层面的东西都封装好了，我们只需要基于它做一层很薄的封装即可，剩下的就是样式问题了，而且引入它也不存在依赖剧增的情况（说实话 antd 整个包也不小了），当然这是只是建议，具体看官方怎么决断

用 TanStack Table 不太可能，但是 rc-table 这个库之前有重构的计划，具体看 @zombieJ 有没有时间了

[AmirrezaAsadpour]

waiting for it，Please merge it

[XuJin186]

waiting for it，Please merge it

[AmirrezaAsadpour]

waiting for it，Please merge it

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

src/Table.tsx (1)

140-144: 对外 API onColumnResizeEnd 的命名与结构建议

命名与内部 colsWidths/colWidths 存在不一致；建议统一术语，避免 columnWidths vs colWidths 混用。同时，为提升查询效率与可读性，考虑将 columnWidths 从数组改为 Record/Map（O(1) 查找），或并行提供两种形式。

🧹 Nitpick comments (5)

src/interface.ts (2)

66-66: 建议为 scrollbar 属性添加文档说明。

scrollbar 属性缺少 JSDoc 注释，建议补充说明其用途和使用场景，例如是否用于标识虚拟滚动条列。这将有助于其他开发者理解该属性的作用。

可以考虑添加类似如下的文档：

   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
+  /** Column configuration with optional scrollbar metadata */
   column?: ColumnsType<RecordType>[number] & { scrollbar?: boolean };
   colSpan?: number;
   rowSpan?: number;

---

130-130: 建议为 resizable 属性添加详细文档。

resizable 属性作为列宽调整功能的核心 API，建议添加 JSDoc 注释说明：

• 该属性的作用（是否允许用户拖拽调整列宽）
• 默认值（未设置时的行为）
• 与其他属性的交互（如 width、minWidth 等）

这将帮助用户更好地理解和使用该功能。

可以考虑添加类似如下的文档：

   rowSpan?: number;
   width?: number | string;
   minWidth?: number;
+  /** Whether the column can be resized by dragging. Defaults to false. */
   resizable?: boolean;
   onCell?: GetComponentProps<RecordType>;

src/context/TableContext.tsx (1)

64-66: 回调重命名合理，但需处理旧字段歧义与文档说明

• onColumnWidthChange 命名清晰，但同时保留 colWidths（数组）与新增 colsWidths（Map）/colsKeys 会造成概念重复与状态分裂风险。建议标注 colWidths 为废弃，指引改用新组合。
• 建议为回调补充最小文档（单位/裁剪规则），避免二义性。

可考虑如下微调（仅类型注释与废弃标记）：

-  onColumnWidthChange: (columnKey: React.Key, width: number) => void;
+  /** width 单位：px；应为已按 minWidth/maxWidth 约束后的值 */
+  onColumnWidthChange: (columnKey: React.Key, width: number) => void;

-  colWidths: number[];
+  /** @deprecated 请改用 colsWidths + colsKeys；后续将移除 */
+  colWidths: number[];

src/Table.tsx (2)

392-396: useMemo 依赖使用 join 带来不必要开销与潜在碰撞

pureColsKeys.join('_') 每次 render 做 O(n) 字符串拼接，且当 key 含下划线可能造成误判。这里 colsKeys 仅回传 pureColsKeys 本身，useMemo 意义有限。建议简化：

- const pureColsKeys = getColumnsKey(flattenColumns);
- const colsKeys = React.useMemo(() => pureColsKeys, [pureColsKeys.join('_')]);
+ const pureColsKeys = getColumnsKey(flattenColumns);
+ // 直接使用或以引用为依赖即可
+ const colsKeys = React.useMemo(() => pureColsKeys, [pureColsKeys]);
+ // 或：const colsKeys = pureColsKeys;

---

447-450: 为 onColumnWidthChange 增加输入健壮性（NaN/负值/无穷）

拖拽过程中可能产生异常宽度，建议在入口处校验，避免状态抖动与布局异常。

- const onColumnWidthChange = React.useCallback((columnKey: React.Key, width: number) => {
+ const onColumnWidthChange = React.useCallback((columnKey: React.Key, width: number) => {
+   if (!Number.isFinite(width) || width < 0) {
+     return;
+   }
    updateColsWidths(widths => {
      if (widths.get(columnKey) !== width) {
        const newWidths = new Map(widths);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1cb8e69 and 66f1c8f.

📒 Files selected for processing (12)

• README.md (1 hunks)
• assets/index.less (3 hunks)
• package.json (0 hunks)
• src/Body/MeasureCell.tsx (1 hunks)
• src/Body/MeasureRow.tsx (3 hunks)
• src/Body/index.tsx (3 hunks)
• src/FixedHolder/index.tsx (1 hunks)
• src/Header/HeaderRow.tsx (3 hunks)
• src/Table.tsx (9 hunks)
• src/VirtualTable/BodyGrid.tsx (3 hunks)
• src/context/TableContext.tsx (2 hunks)
• src/interface.ts (2 hunks)

💤 Files with no reviewable changes (1)

• package.json

🚧 Files skipped from review as they are similar to previous changes (7)

• src/Body/index.tsx
• src/FixedHolder/index.tsx
• src/Body/MeasureCell.tsx
• src/Header/HeaderRow.tsx
• assets/index.less
• src/VirtualTable/BodyGrid.tsx
• README.md

🔇 Additional comments (8)

src/Body/MeasureRow.tsx (1)

11-11: LGTM！属性重命名一致且清晰

从 onColumnResize 重命名为 onColumnWidthChange 在整个文件中应用一致（接口定义、解构、回调调用和属性传递），有助于区分职责并提高代码清晰度。

Also applies to: 18-18, 30-30, 45-45

src/context/TableContext.tsx (1)

78-86: fullTableRef 类型不空安全；建议使用只读集合类型暴露上下文以避免误改

• fullTableRef 目前为 MutableRefObject，常规 useRef(null) 初始为 null，类型不匹配且可能导致非空断言滥用。应改为 MutableRefObject<HTMLDivElement | null>。
• 上下文中暴露的 Map/数组若被外部原地修改，会引发不可预期的共享可变状态。建议使用 ReadonlyMap 与 readonly 数组。
• onColumnResizeEnd 的 columnWidths 可设为 ReadonlyArray 以保持一致的只读语义。

请考虑如下类型调整：

-  fullTableRef: React.MutableRefObject<HTMLDivElement>;
-  colsWidths: Map<React.Key, number>;
-  colsKeys: React.Key[];
+  fullTableRef: React.MutableRefObject<HTMLDivElement | null>;
+  colsWidths: ReadonlyMap<React.Key, number>;
+  colsKeys: readonly React.Key[];

-  onColumnResizeEnd?: (info: {
-    columnKey: React.Key;
-    width: number;
-    columnWidths: { columnKey: React.Key; width: number }[];
-  }) => void;
+  onColumnResizeEnd?: (info: {
+    columnKey: React.Key;
+    width: number;
+    columnWidths: ReadonlyArray<{ columnKey: React.Key; width: number }>;
+  }) => void;

可用脚本快速核查影响面与遗留命名：

src/Table.tsx (6)

242-242: 解构追加 onColumnResizeEnd：OK

按预期将对外回调贯通到组件内部。

---

837-837: 正在拖拽态 className：OK

新增 ${prefixCls}-column-resizing 有利于样式与交互隔离。

---

914-914: 向下传递 onColumnWidthChange：OK

命名与职责清晰，便于区分变化与结束事件。

---

929-934: 上下文扩展：OK，但建议确认重置时机

onResizingChange: setIsResizing 贯通合理。请确保在拖拽取消/组件卸载时回落为 false，避免残留“正在拖拽”的 UI 状态。

---

950-950: 依赖中加入 fullTableRef：OK

Ref 对象本身稳定，加入依赖通常不必要；若为满足 lint 要求可保留。

---

974-980: 对象字面量重复传入 colWidths，后者会覆盖前者（功能风险）

在同一对象中出现两次 colWidths，会导致前一处值被覆盖，可能引入难排查的行为差异。请移除重复项。

       onColumnWidthChange,
       colsWidths,
       colsKeys,
-      colWidths,
       onColumnResizeEnd,
       setIsResizing,
-      colWidths,
+      colWidths,

另：此处使用 setIsResizing，而其它位置通过 onResizingChange 命名传递，建议统一命名以降低心智负担。

Also applies to: 980-980