@rainbow-oh/yee-c 0.10.0 → 0.12.0

package/dist/cjs/Table/hooks/useColumnResize.js

@@ -0,0 +1,217 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/hooks/useColumnResize.ts
+var useColumnResize_exports = {};
+__export(useColumnResize_exports, {
+  default: () => useColumnResize
+});
+module.exports = __toCommonJS(useColumnResize_exports);
+var React = __toESM(require("react"));
+var import_useLatest = __toESM(require("../../hooks/useLatest"));
+var DEFAULT_MIN_COLUMN_WIDTH = 40;
+var KEYBOARD_STEP = 8;
+var clampWidth = (width, column) => {
+  var _a;
+  const min = Math.max((_a = column.minWidth) != null ? _a : DEFAULT_MIN_COLUMN_WIDTH, 0);
+  const max = column.maxWidth;
+  if (width < min)
+    return min;
+  if (max !== void 0 && width > max)
+    return max;
+  return Math.round(width);
+};
+function useColumnResize({
+  tableRef,
+  columnsRef,
+  onColumnResize,
+  onColumnResizeEnd
+}) {
+  const [resizedWidths, setResizedWidths] = React.useState({});
+  const [resizingKey, setResizingKey] = React.useState(null);
+  const onColumnResizeRef = (0, import_useLatest.default)(onColumnResize);
+  const onColumnResizeEndRef = (0, import_useLatest.default)(onColumnResizeEnd);
+  const resizedWidthsRef = (0, import_useLatest.default)(resizedWidths);
+  const frameRef = React.useRef(0);
+  const teardownRef = React.useRef(null);
+  const snapshotWidths = React.useCallback(() => {
+    var _a, _b;
+    const columns = columnsRef.current || [];
+    const colElements = (_a = tableRef.current) == null ? void 0 : _a.querySelectorAll(
+      ":scope > colgroup > col"
+    );
+    if (!colElements || colElements.length !== columns.length)
+      return null;
+    if (!columns.length)
+      return null;
+    const snapshot = {};
+    for (let index = 0; index < columns.length; index += 1) {
+      const key = (_b = columns[index]) == null ? void 0 : _b.resizeKey;
+      const width = Math.round(
+        colElements[index].getBoundingClientRect().width
+      );
+      if (!key || !Number.isFinite(width) || width <= 0)
+        return null;
+      snapshot[key] = width;
+    }
+    return snapshot;
+  }, [columnsRef, tableRef]);
+  const findColumn = React.useCallback(
+    (resizeKey) => (columnsRef.current || []).find(
+      (column) => column.resizeKey === resizeKey
+    ),
+    [columnsRef]
+  );
+  const onResizeStart = React.useCallback(
+    (event, resizeKey) => {
+      if (event.button !== 0)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      const column = findColumn(resizeKey);
+      if (!column)
+        return;
+      const snapshot = snapshotWidths();
+      if (!snapshot)
+        return;
+      const startX = event.clientX;
+      const startWidth = snapshot[resizeKey];
+      let latestWidth = startWidth;
+      setResizingKey(resizeKey);
+      setResizedWidths(snapshot);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+      const applyWidth = (clientX) => {
+        var _a;
+        const next = clampWidth(startWidth + (clientX - startX), column);
+        if (next === latestWidth)
+          return;
+        latestWidth = next;
+        setResizedWidths((current) => __spreadProps(__spreadValues({}, current), { [resizeKey]: next }));
+        (_a = onColumnResizeRef.current) == null ? void 0 : _a.call(onColumnResizeRef, next, column);
+      };
+      const onPointerMove = (moveEvent) => {
+        const { clientX } = moveEvent;
+        if (frameRef.current)
+          cancelAnimationFrame(frameRef.current);
+        frameRef.current = requestAnimationFrame(() => {
+          frameRef.current = 0;
+          applyWidth(clientX);
+        });
+      };
+      const detachers = [];
+      const bind = (type, handler) => {
+        window.addEventListener(type, handler);
+        detachers.push(
+          () => window.removeEventListener(type, handler)
+        );
+      };
+      const teardown = () => {
+        if (frameRef.current) {
+          cancelAnimationFrame(frameRef.current);
+          frameRef.current = 0;
+        }
+        detachers.forEach((detach) => detach());
+        detachers.length = 0;
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        teardownRef.current = null;
+      };
+      const stop = () => {
+        var _a;
+        teardown();
+        setResizingKey(null);
+        (_a = onColumnResizeEndRef.current) == null ? void 0 : _a.call(onColumnResizeEndRef, latestWidth, column);
+      };
+      teardownRef.current = teardown;
+      bind("pointermove", onPointerMove);
+      bind("pointerup", stop);
+      bind("pointercancel", stop);
+    },
+    [findColumn, snapshotWidths, onColumnResizeRef, onColumnResizeEndRef]
+  );
+  const onResizeStep = React.useCallback(
+    (resizeKey, direction) => {
+      var _a, _b;
+      const column = findColumn(resizeKey);
+      if (!column)
+        return;
+      const base = resizedWidthsRef.current;
+      const snapshot = base[resizeKey] === void 0 ? snapshotWidths() : base;
+      if (!snapshot)
+        return;
+      const next = clampWidth(
+        snapshot[resizeKey] + direction * KEYBOARD_STEP,
+        column
+      );
+      if (next === snapshot[resizeKey])
+        return;
+      setResizedWidths(__spreadProps(__spreadValues({}, snapshot), { [resizeKey]: next }));
+      (_a = onColumnResizeRef.current) == null ? void 0 : _a.call(onColumnResizeRef, next, column);
+      (_b = onColumnResizeEndRef.current) == null ? void 0 : _b.call(onColumnResizeEndRef, next, column);
+    },
+    [
+      findColumn,
+      snapshotWidths,
+      resizedWidthsRef,
+      onColumnResizeRef,
+      onColumnResizeEndRef
+    ]
+  );
+  const resetResizedWidths = React.useCallback(() => {
+    setResizedWidths((current) => Object.keys(current).length ? {} : current);
+  }, []);
+  React.useEffect(() => () => {
+    var _a;
+    return (_a = teardownRef.current) == null ? void 0 : _a.call(teardownRef);
+  }, []);
+  return {
+    resizedWidths,
+    resizingKey,
+    onResizeStart,
+    onResizeStep,
+    resetResizedWidths
+  };
+}

package/dist/cjs/Table/hooks/useColumns.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
-export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
+export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, resizable, resizedWidths, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
     rowSelection?: RowSelectionType;
     expandable?: ExpandableType;
     measuredColumnWidths?: number[];
+    resizable?: boolean;
+    resizedWidths?: Record<string, number>;
 }): {
     wrapedColumns: WrapedColumnProps[];
     headerRows: import("../interface").HeaderCell[][];

package/dist/cjs/Table/hooks/useColumns.js

@@ -64,7 +64,9 @@ function useColumns({
   columns,
   rowSelection,
   expandable,
-  measuredColumnWidths
+  measuredColumnWidths,
+  resizable,
+  resizedWidths
 }) {
   const childColumns = (0, import_react.useMemo)(() => {
     return children ? getColumnsFromChild(children) : null;
@@ -73,10 +75,19 @@ function useColumns({
     const base = (0, import_deepClone.default)(childColumns || columns || []) || [];
     const tree = (0, import_header.injectSelectionExpand)(base, rowSelection, expandable);
     const leaves = (0, import_header.flattenLeafColumns)(tree);
-    const wraped = (0, import_util.handleColumns)(leaves, measuredColumnWidths);
+    const resized = (0, import_util.applyColumnResize)(leaves, resizable, resizedWidths);
+    const wraped = (0, import_util.handleColumns)(resized, measuredColumnWidths);
     const rows = (0, import_header.parseHeaderRows)(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
+  }, [
+    childColumns,
+    columns,
+    rowSelection,
+    expandable,
+    measuredColumnWidths,
+    resizable,
+    resizedWidths
+  ]);
   return {
     wrapedColumns,
     headerRows

package/dist/cjs/Table/interface.d.ts

@@ -67,6 +67,18 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
     };
     onSort?: (dataIndex: string, sorter: any) => void;
     onInternalFilter?: (dataIndex: string, value: string) => void;
+    /**
+     * `resizeKey` of the column currently being dragged, if any
+     */
+    resizingKey?: string | null;
+    /**
+     * Begin a pointer driven column resize. Injected by Table when resizing is on.
+     */
+    onResizeStart?: (event: React.PointerEvent<HTMLElement>, resizeKey: string) => void;
+    /**
+     * Nudge a column width by `delta` px, for keyboard driven resizing
+     */
+    onResizeStep?: (resizeKey: string, delta: number) => void;
     /**
      * Horizontal span, used for grouped header cells
      */
@@ -227,6 +239,20 @@ export interface ColumnProps {
      * Set width
      */
     width?: number | string;
+    /**
+     * Whether this column can be resized by dragging the right edge of its header
+     * cell. Falls back to the table level `resizable` when not set.
+     */
+    resizable?: boolean;
+    /**
+     * Lower bound (in px) applied while resizing this column
+     * @default 40
+     */
+    minWidth?: number;
+    /**
+     * Upper bound (in px) applied while resizing this column
+     */
+    maxWidth?: number;
     /**
      * Set header display text
      */
@@ -261,6 +287,12 @@ export interface WrapedColumnProps extends ColumnProps, ExpandableType, Omit<Row
      * Whether this is the first column fixed to the right
      */
     isFixedRightFirst?: boolean;
+    /**
+     * Stable identity of this leaf column, used as the key of the resized width
+     * map. Only assigned to leaf columns, so its presence also marks a column as
+     * a valid resize target (group header cells never carry one).
+     */
+    resizeKey?: string;
 }
 /**
  * A header cell resolved from the column tree, with computed span info for multi-level headers.
@@ -554,6 +586,23 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
      * Set table layout
      */
     tableLayout?: 'auto' | 'fixed';
+    /**
+     * Whether columns can be resized by dragging the right edge of their header
+     * cell. Individual columns can opt out with `column.resizable: false`.
+     *
+     * The first drag snapshots the rendered width of every column and switches the
+     * table to a px controlled `table-layout: fixed`, so column widths stay exactly
+     * where they are dragged instead of being redistributed by the browser.
+     */
+    resizable?: boolean;
+    /**
+     * Fired on every width change while a column is being dragged
+     */
+    onColumnResize?: (width: number, column: WrapedColumnProps) => void;
+    /**
+     * Fired once when a column resize interaction finishes
+     */
+    onColumnResizeEnd?: (width: number, column: WrapedColumnProps) => void;
     /**
      * Whether to enable virtual list
      */

package/dist/cjs/Table/style/index.less

@@ -71,6 +71,48 @@
     }
   }
 
+  // Sits inside the header cell's right padding so it never overlaps the sorter
+  // or filter controls, which are laid out against the content edge.
+  &-resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    width: var(--yee-table-resize-handle-width);
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    touch-action: none;
+    user-select: none;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 25%;
+      right: calc(var(--yee-table-resize-handle-width) / 2 - 1px);
+      width: 2px;
+      height: 50%;
+      background-color: transparent;
+    }
+
+    &:hover::after,
+    &:focus-visible::after,
+    &-active::after {
+      background-color: var(--yee-color-primary);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  // While dragging, the pointer leaves the handle constantly; keep the cursor and
+  // the selection lock consistent across the whole table.
+  &-resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+
   &-filter {
     max-height: var(--yee-table-filter-popup-height);
     background-color: var(--yee-table-filter-list-bg-color);
@@ -158,7 +200,7 @@
     margin-left: 4px;
 
     .active {
-      color: var(--yee-primary-color);
+      color: var(--yee-color-primary);
     }
   }
 

package/dist/cjs/Table/table.js

@@ -68,6 +68,7 @@ var import_Spin = __toESM(require("../Spin"));
 var import_col_group = __toESM(require("./col-group"));
 var import_footer = __toESM(require("./footer"));
 var import_header = __toESM(require("./header"));
+var import_useColumnResize = __toESM(require("./hooks/useColumnResize"));
 var import_useColumns = __toESM(require("./hooks/useColumns"));
 var import_useExpand = __toESM(require("./hooks/useExpand"));
 var import_useSelection = __toESM(require("./hooks/useSelection"));
@@ -75,7 +76,6 @@ var import_tbody = __toESM(require("./tbody"));
 var import_tfooter = __toESM(require("./tfooter"));
 var import_theader = __toESM(require("./theader"));
 var import_Config_Provider = require("../Config-Provider");
-var import_useLatest = __toESM(require("../hooks/useLatest"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_omit = __toESM(require("../utils/omit"));
 var import_types = require("../utils/types");
@@ -97,6 +97,9 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     rowKey = "key",
     bordered,
     tableLayout,
+    resizable,
+    onColumnResize,
+    onColumnResizeEnd,
     loading = false,
     showHeader = true,
     pagination: propPagination = true,
@@ -123,6 +126,9 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     "rowKey",
     "bordered",
     "tableLayout",
+    "resizable",
+    "onColumnResize",
+    "onColumnResizeEnd",
     "loading",
     "showHeader",
     "pagination",
@@ -142,6 +148,22 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   ]);
   const dataAttrs = (0, import_types.pickDataAttrs)(rest);
   const [measuredColumnWidths, setMeasuredColumnWidths] = import_react.default.useState();
+  const contentRef = (0, import_react.useRef)(null);
+  const tableRef = (0, import_react.useRef)(null);
+  const wrapedColumnsRef = (0, import_react.useRef)([]);
+  const {
+    resizedWidths,
+    resizingKey,
+    onResizeStart,
+    onResizeStep,
+    resetResizedWidths
+  } = (0, import_useColumnResize.default)({
+    tableRef,
+    columnsRef: wrapedColumnsRef,
+    onColumnResize,
+    onColumnResizeEnd
+  });
+  const hasResizeSnapshot = Object.keys(resizedWidths).length > 0;
   const getRowKey = import_react.default.useCallback(
     (record, key = rowKey) => {
       return typeof key === "function" ? key(record) : record[key];
@@ -156,8 +178,31 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     columns: propColumns,
     expandable,
     rowSelection,
-    measuredColumnWidths
+    measuredColumnWidths: hasResizeSnapshot ? void 0 : measuredColumnWidths,
+    resizable,
+    resizedWidths
   });
+  wrapedColumnsRef.current = wrapedColumns;
+  const resizeTotalWidth = (0, import_react.useMemo)(() => {
+    if (!wrapedColumns.length)
+      return void 0;
+    let total = 0;
+    for (const column of wrapedColumns) {
+      const width = column.resizeKey ? resizedWidths[column.resizeKey] : void 0;
+      if (!width || !Number.isFinite(width))
+        return void 0;
+      total += width;
+    }
+    return total;
+  }, [wrapedColumns, resizedWidths]);
+  const resizeActive = resizeTotalWidth !== void 0;
+  const resizeKeysSignature = (0, import_react.useMemo)(
+    () => wrapedColumns.map((column) => column.resizeKey).join("|"),
+    [wrapedColumns]
+  );
+  (0, import_react.useEffect)(() => {
+    resetResizedWidths();
+  }, [resizeKeysSignature, resetResizedWidths]);
   const {
     data: filteredData,
     filterRecords,
@@ -215,8 +260,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
   const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
-  const contentRef = (0, import_react.useRef)(null);
-  const tableRef = (0, import_react.useRef)(null);
   const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
     left: false,
     right: false
@@ -244,7 +287,6 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     ).join("|"),
     [wrapedColumns]
   );
-  const wrapedColumnsRef = (0, import_useLatest.default)(wrapedColumns);
   const updateMeasuredColumnWidths = import_react.default.useCallback(() => {
     var _a2;
     const columns = wrapedColumnsRef.current;
@@ -345,7 +387,10 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
         sorters,
         onSort: handleSort,
         onCheckAll,
-        onInternalFilter: onFilterInternal
+        onInternalFilter: onFilterInternal,
+        resizingKey,
+        onResizeStart,
+        onResizeStep
       })
     );
   };
@@ -373,8 +418,12 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   const renderTable = () => {
     const tableProps = {
       style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.table), {
-        minWidth: scroll == null ? void 0 : scroll.x,
-        tableLayout: (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
+        // An explicit total width replaces both `width: 100%` and `scroll.x`:
+        // either of those would let the browser stretch the table and redistribute
+        // the extra space across the columns, undoing the drag.
+        minWidth: resizeActive ? void 0 : scroll == null ? void 0 : scroll.x,
+        width: resizeTotalWidth,
+        tableLayout: resizeActive ? "fixed" : (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
       }),
       className: (0, import_clsx.default)(
         { [`${prefixCls}-bordered`]: bordered },
@@ -434,7 +483,11 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
-      className: (0, import_clsx.default)(`${prefixCls}-box`, className),
+      className: (0, import_clsx.default)(
+        `${prefixCls}-box`,
+        { [`${prefixCls}-resizing`]: !!resizingKey },
+        className
+      ),
       style,
       ref
     }, dataAttrs),

package/dist/cjs/Table/theader/cell.js

@@ -89,9 +89,14 @@ var HeadCell = (props) => {
     width,
     colSpan,
     rowSpan,
+    resizable,
+    resizeKey,
+    resizingKey,
     onHeaderCell,
     onSort,
-    onInternalFilter
+    onInternalFilter,
+    onResizeStart,
+    onResizeStep
   } = _a, rest = __objRest(_a, [
     "fixed",
     "isFixedLeftLast",
@@ -112,9 +117,14 @@ var HeadCell = (props) => {
     "width",
     "colSpan",
     "rowSpan",
+    "resizable",
+    "resizeKey",
+    "resizingKey",
     "onHeaderCell",
     "onSort",
-    "onInternalFilter"
+    "onInternalFilter",
+    "onResizeStart",
+    "onResizeStep"
   ]);
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
   const { locale } = (0, import_locale.useLocale)();
@@ -208,6 +218,38 @@ var HeadCell = (props) => {
     },
     className
   );
+  const showResizeHandle = !!(resizable && resizeKey && onResizeStart);
+  const isResizing = !!resizeKey && resizingKey === resizeKey;
+  const renderResizeHandle = () => {
+    if (!showResizeHandle)
+      return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": tableLocale.resizeColumn || "Drag to resize column",
+        tabIndex: 0,
+        className: (0, import_clsx.default)(`${prefixCls}-resize-handle`, {
+          [`${prefixCls}-resize-handle-active`]: isResizing
+        }),
+        onPointerDown: (event) => onResizeStart == null ? void 0 : onResizeStart(event, resizeKey),
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onKeyDown: (event) => {
+          if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+          event.preventDefault();
+          onResizeStep == null ? void 0 : onResizeStep(
+            resizeKey,
+            event.key === "ArrowLeft" ? -1 : 1
+          );
+        }
+      }
+    );
+  };
   const getThProps = () => {
     const styles2 = __spreadProps(__spreadValues({}, style), { width, maxWidth: width, textAlign: align });
     const cellProps = onHeaderCell ? onHeaderCell(props) : {};
@@ -222,9 +264,9 @@ var HeadCell = (props) => {
   const thProps = getThProps();
   const renderCell = () => {
     if (!filter && !sorter) {
-      return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), title);
+      return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), title, renderResizeHandle());
     }
-    return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), renderCellWithAction());
+    return /* @__PURE__ */ import_react.default.createElement("th", __spreadValues({}, thProps), renderCellWithAction(), renderResizeHandle());
   };
   const cell = renderCell();
   return cell;

package/dist/cjs/Table/util/index.d.ts

@@ -1,2 +1,20 @@
-import { WrapedColumnProps } from '../interface';
+import { ColumnProps, WrapedColumnProps } from '../interface';
+/**
+ * Stable identity for a leaf column, used to key its resized width.
+ *
+ * `key`/`dataIndex` survive re-ordering and data changes, so they are preferred.
+ * Columns declaring neither fall back to their position, which is the best that
+ * can be done without asking the caller for an id.
+ */
+export declare function getColumnResizeKey(column: ColumnProps, index: number): string;
+/**
+ * Stamp every leaf column with its `resizeKey`, resolve whether it is resizable
+ * (column level setting wins over the table level one) and override `width` with
+ * the dragged value when there is one.
+ *
+ * This runs before `handleColumns` so that the colgroup, the header cells, the
+ * body cells and the sticky offsets of fixed columns all read the same width
+ * from a single place.
+ */
+export declare function applyColumnResize(columns: Array<WrapedColumnProps>, resizable?: boolean, resizedWidths?: Record<string, number>): WrapedColumnProps[];
 export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];

package/dist/cjs/Table/util/index.js

@@ -36,9 +36,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Table/util/index.ts
 var util_exports = {};
 __export(util_exports, {
+  applyColumnResize: () => applyColumnResize,
+  getColumnResizeKey: () => getColumnResizeKey,
   handleColumns: () => handleColumns
 });
 module.exports = __toCommonJS(util_exports);
+function getColumnResizeKey(column, index) {
+  var _a;
+  const id = (_a = column.key) != null ? _a : column.dataIndex;
+  return id === void 0 || id === null || id === "" ? `index:${index}` : `id:${id}`;
+}
+function applyColumnResize(columns, resizable, resizedWidths) {
+  return columns.map((column, index) => {
+    var _a, _b;
+    const resizeKey = getColumnResizeKey(column, index);
+    const resizedWidth = resizedWidths == null ? void 0 : resizedWidths[resizeKey];
+    const next = __spreadProps(__spreadValues({}, column), {
+      resizeKey,
+      resizable: (_b = (_a = column.resizable) != null ? _a : resizable) != null ? _b : false
+    });
+    if (Number.isFinite(resizedWidth) && resizedWidth > 0) {
+      next.width = resizedWidth;
+    }
+    return next;
+  });
+}
 var getColumnWidth = (column, index, measuredColumnWidths) => {
   const measuredWidth = measuredColumnWidths == null ? void 0 : measuredColumnWidths[index];
   if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {