@rainbow-oh/yee-c 0.10.0 → 0.12.0

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

@@ -0,0 +1,206 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+import useLatest from "../../hooks/useLatest";
+/** Floor for a dragged column when it declares no `minWidth` of its own. */
+var DEFAULT_MIN_COLUMN_WIDTH = 40;
+
+/** Width delta applied per arrow key press when a handle has focus. */
+var KEYBOARD_STEP = 8;
+var clampWidth = function clampWidth(width, column) {
+  var _column$minWidth;
+  var min = Math.max((_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : DEFAULT_MIN_COLUMN_WIDTH, 0);
+  var max = column.maxWidth;
+  if (width < min) return min;
+  if (max !== undefined && width > max) return max;
+  return Math.round(width);
+};
+
+/**
+ * Pointer (and keyboard) driven column resizing.
+ *
+ * The table normally lets the browser distribute widths (`width: 100%` with an
+ * `auto` layout), which means writing a width onto one column would silently
+ * steal space from its neighbours. So the first resize interaction snapshots the
+ * rendered width of *every* column; from then on the table is fully px
+ * controlled and a drag only moves the column it grabbed.
+ */
+export default function useColumnResize(_ref) {
+  var tableRef = _ref.tableRef,
+    columnsRef = _ref.columnsRef,
+    onColumnResize = _ref.onColumnResize,
+    onColumnResizeEnd = _ref.onColumnResizeEnd;
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    resizedWidths = _React$useState2[0],
+    setResizedWidths = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    resizingKey = _React$useState4[0],
+    setResizingKey = _React$useState4[1];
+
+  // Callbacks are consumer supplied and usually re-created every render; reading
+  // them from a ref keeps `onResizeStart` stable.
+  var onColumnResizeRef = useLatest(onColumnResize);
+  var onColumnResizeEndRef = useLatest(onColumnResizeEnd);
+  var resizedWidthsRef = useLatest(resizedWidths);
+  var frameRef = React.useRef(0);
+  var teardownRef = React.useRef(null);
+
+  /**
+   * Read the rendered width of every column off the `<col>` elements. Returns
+   * null when the measurement cannot be trusted, in which case the interaction
+   * is abandoned rather than applying a partial snapshot (a partial snapshot
+   * would leave holes once the layout switches to `fixed`).
+   */
+  var snapshotWidths = React.useCallback(function () {
+    var _tableRef$current;
+    var columns = columnsRef.current || [];
+    var colElements = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelectorAll(':scope > colgroup > col');
+    if (!colElements || colElements.length !== columns.length) return null;
+    if (!columns.length) return null;
+    var snapshot = {};
+    for (var index = 0; index < columns.length; index += 1) {
+      var _columns$index;
+      var key = (_columns$index = columns[index]) === null || _columns$index === void 0 ? void 0 : _columns$index.resizeKey;
+      var _width = Math.round(colElements[index].getBoundingClientRect().width);
+      if (!key || !Number.isFinite(_width) || _width <= 0) return null;
+      snapshot[key] = _width;
+    }
+    return snapshot;
+  }, [columnsRef, tableRef]);
+  var findColumn = React.useCallback(function (resizeKey) {
+    return (columnsRef.current || []).find(function (column) {
+      return column.resizeKey === resizeKey;
+    });
+  }, [columnsRef]);
+  var onResizeStart = React.useCallback(function (event, resizeKey) {
+    // Ignore secondary buttons, and never let the drag reach the sorter click
+    // handler or start a native text selection.
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    var column = findColumn(resizeKey);
+    if (!column) return;
+    var snapshot = snapshotWidths();
+    if (!snapshot) return;
+    var startX = event.clientX;
+    var startWidth = snapshot[resizeKey];
+    var latestWidth = startWidth;
+    setResizingKey(resizeKey);
+    setResizedWidths(snapshot);
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+    var applyWidth = function applyWidth(clientX) {
+      var _onColumnResizeRef$cu;
+      var next = clampWidth(startWidth + (clientX - startX), column);
+      if (next === latestWidth) return;
+      latestWidth = next;
+      setResizedWidths(function (current) {
+        return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, resizeKey, next));
+      });
+      (_onColumnResizeRef$cu = onColumnResizeRef.current) === null || _onColumnResizeRef$cu === void 0 || _onColumnResizeRef$cu.call(onColumnResizeRef, next, column);
+    };
+
+    // pointermove fires far more often than the browser can paint, and every
+    // width change relayouts the whole table, so coalesce to one per frame.
+    var onPointerMove = function onPointerMove(moveEvent) {
+      var clientX = moveEvent.clientX;
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+      frameRef.current = requestAnimationFrame(function () {
+        frameRef.current = 0;
+        applyWidth(clientX);
+      });
+    };
+
+    // Detaching listeners and restoring the document is split out from `stop`
+    // so that unmounting mid-drag can clean up without emitting a resize-end
+    // event or touching state on a gone component.
+    // Collected as closures so that `teardown` does not have to name the
+    // handlers it removes (`stop` is defined after it, and they are mutual).
+    var detachers = [];
+    var bind = function bind(type, handler) {
+      window.addEventListener(type, handler);
+      detachers.push(function () {
+        return window.removeEventListener(type, handler);
+      });
+    };
+    var teardown = function teardown() {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = 0;
+      }
+      detachers.forEach(function (detach) {
+        return detach();
+      });
+      detachers.length = 0;
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+      teardownRef.current = null;
+    };
+    var stop = function stop() {
+      var _onColumnResizeEndRef;
+      teardown();
+      setResizingKey(null);
+      (_onColumnResizeEndRef = onColumnResizeEndRef.current) === null || _onColumnResizeEndRef === void 0 || _onColumnResizeEndRef.call(onColumnResizeEndRef, latestWidth, column);
+    };
+    teardownRef.current = teardown;
+    bind('pointermove', onPointerMove);
+    bind('pointerup', stop);
+    bind('pointercancel', stop);
+  }, [findColumn, snapshotWidths, onColumnResizeRef, onColumnResizeEndRef]);
+
+  /** Keyboard equivalent of a drag, so the handle is operable without a mouse. */
+  var onResizeStep = React.useCallback(function (resizeKey, direction) {
+    var _onColumnResizeRef$cu2, _onColumnResizeEndRef2;
+    var column = findColumn(resizeKey);
+    if (!column) return;
+    var base = resizedWidthsRef.current;
+    var snapshot = base[resizeKey] === undefined ? snapshotWidths() : base;
+    if (!snapshot) return;
+    var next = clampWidth(snapshot[resizeKey] + direction * KEYBOARD_STEP, column);
+    if (next === snapshot[resizeKey]) return;
+    setResizedWidths(_objectSpread(_objectSpread({}, snapshot), {}, _defineProperty({}, resizeKey, next)));
+    (_onColumnResizeRef$cu2 = onColumnResizeRef.current) === null || _onColumnResizeRef$cu2 === void 0 || _onColumnResizeRef$cu2.call(onColumnResizeRef, next, column);
+    (_onColumnResizeEndRef2 = onColumnResizeEndRef.current) === null || _onColumnResizeEndRef2 === void 0 || _onColumnResizeEndRef2.call(onColumnResizeEndRef, next, column);
+  }, [findColumn, snapshotWidths, resizedWidthsRef, onColumnResizeRef, onColumnResizeEndRef]);
+
+  /**
+   * Forget the snapshot. Called when the column set changes: widths keyed to
+   * columns that no longer exist would under-report the total table width.
+   */
+  var resetResizedWidths = React.useCallback(function () {
+    setResizedWidths(function (current) {
+      return Object.keys(current).length ? {} : current;
+    });
+  }, []);
+
+  // Unmounting mid-drag must not leave listeners or body styles behind.
+  React.useEffect(function () {
+    return function () {
+      var _teardownRef$current;
+      return (_teardownRef$current = teardownRef.current) === null || _teardownRef$current === void 0 ? void 0 : _teardownRef$current.call(teardownRef);
+    };
+  }, []);
+
+  // Not gated on any `enabled` flag: the state stays empty until something drags,
+  // and handles are only rendered for columns that opted in, so an unused Table
+  // pays nothing and a column-level `resizable` works with no table-level flag.
+  return {
+    resizedWidths: resizedWidths,
+    resizingKey: resizingKey,
+    onResizeStart: onResizeStart,
+    onResizeStep: onResizeStep,
+    resetResizedWidths: resetResizedWidths
+  };
+}

package/dist/esm/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/esm/Table/hooks/useColumns.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useMemo } from 'react';
 import deepClone from "../../utils/deepClone";
-import { handleColumns } from "../util";
+import { applyColumnResize, handleColumns } from "../util";
 import { flattenLeafColumns, injectSelectionExpand, parseHeaderRows } from "../util/header";
 var getColumnsFromChild = function getColumnsFromChild(childs) {
   var cols = [];
@@ -22,7 +22,9 @@ export default function useColumns(_ref) {
     columns = _ref.columns,
     rowSelection = _ref.rowSelection,
     expandable = _ref.expandable,
-    measuredColumnWidths = _ref.measuredColumnWidths;
+    measuredColumnWidths = _ref.measuredColumnWidths,
+    resizable = _ref.resizable,
+    resizedWidths = _ref.resizedWidths;
   var childColumns = useMemo(function () {
     return children ? getColumnsFromChild(children) : null;
   }, [children]);
@@ -34,13 +36,16 @@ export default function useColumns(_ref) {
       var base = deepClone(childColumns || columns || []) || [];
       var tree = injectSelectionExpand(base, rowSelection, expandable);
       var leaves = flattenLeafColumns(tree);
-      var wraped = handleColumns(leaves, measuredColumnWidths);
+      // Resized widths are folded in before the fixed-column offsets are computed,
+      // so sticky positions follow a drag without any extra bookkeeping.
+      var resized = applyColumnResize(leaves, resizable, resizedWidths);
+      var wraped = handleColumns(resized, measuredColumnWidths);
       var rows = parseHeaderRows(tree, wraped);
       return {
         wrapedColumns: wraped,
         headerRows: rows
       };
-    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]),
+    }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths, resizable, resizedWidths]),
     wrapedColumns = _useMemo.wrapedColumns,
     headerRows = _useMemo.headerRows;
   return {

package/dist/esm/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/esm/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/esm/Table/table.js

@@ -1,11 +1,12 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "style", "classNames", "styles", "components", "rowKey", "bordered", "tableLayout", "loading", "showHeader", "pagination", "columns", "dataSource", "size", "summary", "scroll", "header", "download", "footer", "children", "expandable", "rowSelection", "locale", "onChange"];
+var _excluded = ["prefixCls", "className", "style", "classNames", "styles", "components", "rowKey", "bordered", "tableLayout", "resizable", "onColumnResize", "onColumnResizeEnd", "loading", "showHeader", "pagination", "columns", "dataSource", "size", "summary", "scroll", "header", "download", "footer", "children", "expandable", "rowSelection", "locale", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -20,6 +21,7 @@ import Spin from "../Spin";
 import ColGroup from "./col-group";
 import Footer from "./footer";
 import Header from "./header";
+import useColumnResize from "./hooks/useColumnResize";
 import useColumns from "./hooks/useColumns";
 import useExpand from "./hooks/useExpand";
 import useSelection from "./hooks/useSelection";
@@ -27,7 +29,6 @@ import TBody from "./tbody";
 import TFooter from "./tfooter";
 import THeader from "./theader";
 import { GlobalContext } from "../Config-Provider";
-import useLatest from "../hooks/useLatest";
 import mergeContextToProps from "../utils/mergeContextToProps";
 import omit from "../utils/omit";
 import { pickDataAttrs } from "../utils/types";
@@ -51,6 +52,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     rowKey = _props$rowKey === void 0 ? 'key' : _props$rowKey,
     bordered = props.bordered,
     tableLayout = props.tableLayout,
+    resizable = props.resizable,
+    onColumnResize = props.onColumnResize,
+    onColumnResizeEnd = props.onColumnResizeEnd,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     _props$showHeader = props.showHeader,
@@ -78,6 +82,30 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     measuredColumnWidths = _React$useState2[0],
     setMeasuredColumnWidths = _React$useState2[1];
+  var contentRef = useRef(null);
+  var tableRef = useRef(null);
+
+  // Filled in right after `useColumns` below. The resize hook needs the latest
+  // leaf columns, but `wrapedColumns` is itself derived from the resized widths,
+  // so depending on it directly would rebuild the drag handlers mid-drag.
+  var wrapedColumnsRef = useRef([]);
+  var _useColumnResize = useColumnResize({
+      tableRef: tableRef,
+      columnsRef: wrapedColumnsRef,
+      onColumnResize: onColumnResize,
+      onColumnResizeEnd: onColumnResizeEnd
+    }),
+    resizedWidths = _useColumnResize.resizedWidths,
+    resizingKey = _useColumnResize.resizingKey,
+    onResizeStart = _useColumnResize.onResizeStart,
+    onResizeStep = _useColumnResize.onResizeStep,
+    resetResizedWidths = _useColumnResize.resetResizedWidths;
+
+  // Once a snapshot exists, every column carries an explicit px width and the
+  // table switches to `table-layout: fixed`, which makes those declared widths
+  // authoritative. The measured widths lag one frame behind a drag, so they must
+  // stop feeding the fixed-column offsets while a snapshot is in play.
+  var hasResizeSnapshot = Object.keys(resizedWidths).length > 0;
   var getRowKey = React.useCallback(function (record) {
     var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rowKey;
     return typeof key === 'function' ? key(record) : record[key];
@@ -92,10 +120,48 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       columns: propColumns,
       expandable: expandable,
       rowSelection: rowSelection,
-      measuredColumnWidths: measuredColumnWidths
+      measuredColumnWidths: hasResizeSnapshot ? undefined : measuredColumnWidths,
+      resizable: resizable,
+      resizedWidths: resizedWidths
     }),
     wrapedColumns = _useColumns.wrapedColumns,
     headerRows = _useColumns.headerRows;
+  wrapedColumnsRef.current = wrapedColumns;
+
+  // Total width of the px controlled layout. Deliberately `undefined` unless the
+  // snapshot covers every single column: a partial snapshot would leave a hole in
+  // the layout, so it is safer to fall back to the browser's own distribution.
+  var resizeTotalWidth = useMemo(function () {
+    if (!wrapedColumns.length) return undefined;
+    var total = 0;
+    var _iterator = _createForOfIteratorHelper(wrapedColumns),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var column = _step.value;
+        var width = column.resizeKey ? resizedWidths[column.resizeKey] : undefined;
+        if (!width || !Number.isFinite(width)) return undefined;
+        total += width;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return total;
+  }, [wrapedColumns, resizedWidths]);
+  var resizeActive = resizeTotalWidth !== undefined;
+
+  // Identity of the column set, ignoring widths. When it changes the snapshot is
+  // stale (a new column would have no width of its own), so it gets dropped.
+  var resizeKeysSignature = useMemo(function () {
+    return wrapedColumns.map(function (column) {
+      return column.resizeKey;
+    }).join('|');
+  }, [wrapedColumns]);
+  useEffect(function () {
+    resetResizedWidths();
+  }, [resizeKeysSignature, resetResizedWidths]);
 
   // Filter
   var _useFilter = useFilter({
@@ -171,8 +237,6 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
 
   // Track filter changes to emit onChange after filtered data is recalculated
   var prevFilterRecordsRef = useRef(filterRecords);
-  var contentRef = useRef(null);
-  var tableRef = useRef(null);
   var _React$useState3 = React.useState({
       left: false,
       right: false
@@ -203,11 +267,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     }).join('|');
   }, [wrapedColumns]);
 
-  // Keep the latest columns in a ref so that the measure callback stays stable:
-  // `wrapedColumns` is derived from `measuredColumnWidths`, so depending on it
-  // directly would recreate the callback (and the ResizeObserver) on every
+  // `wrapedColumnsRef` (assigned during render, above) keeps the measure callback
+  // stable: `wrapedColumns` is derived from `measuredColumnWidths`, so depending
+  // on it directly would recreate the callback (and the ResizeObserver) on every
   // measurement.
-  var wrapedColumnsRef = useLatest(wrapedColumns);
   var updateMeasuredColumnWidths = React.useCallback(function () {
     var _tableRef$current;
     var columns = wrapedColumnsRef.current;
@@ -302,7 +365,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       sorters: sorters,
       onSort: handleSort,
       onCheckAll: onCheckAll,
-      onInternalFilter: onFilterInternal
+      onInternalFilter: onFilterInternal,
+      resizingKey: resizingKey,
+      onResizeStart: onResizeStart,
+      onResizeStep: onResizeStep
     }));
   };
   var renderTBody = function renderTBody() {
@@ -328,8 +394,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var renderTable = function renderTable() {
     var tableProps = {
       style: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.table), {}, {
-        minWidth: scroll === null || scroll === void 0 ? void 0 : scroll.x,
-        tableLayout: pageData !== null && pageData !== void 0 && pageData.length ? tableLayout : undefined
+        // 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 ? undefined : scroll === null || scroll === void 0 ? void 0 : scroll.x,
+        width: resizeTotalWidth,
+        tableLayout: resizeActive ? 'fixed' : pageData !== null && pageData !== void 0 && pageData.length ? tableLayout : undefined
       }),
       className: clsx(_defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), classNames === null || classNames === void 0 ? void 0 : classNames.table)
     };
@@ -369,7 +439,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     });
   };
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: clsx("".concat(prefixCls, "-box"), className),
+    className: clsx("".concat(prefixCls, "-box"), _defineProperty({}, "".concat(prefixCls, "-resizing"), !!resizingKey), className),
     style: style,
     ref: ref
   }, dataAttrs), /*#__PURE__*/React.createElement(Spin, {

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

@@ -1,4 +1,4 @@
-var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "colSpan", "rowSpan", "onHeaderCell", "onSort", "onInternalFilter"];
+var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "colSpan", "rowSpan", "resizable", "resizeKey", "resizingKey", "onHeaderCell", "onSort", "onInternalFilter", "onResizeStart", "onResizeStep"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -37,9 +37,14 @@ var HeadCell = function HeadCell(props) {
     width = props.width,
     colSpan = props.colSpan,
     rowSpan = props.rowSpan,
+    resizable = props.resizable,
+    resizeKey = props.resizeKey,
+    resizingKey = props.resizingKey,
     onHeaderCell = props.onHeaderCell,
     onSort = props.onSort,
     onInternalFilter = props.onInternalFilter,
+    onResizeStart = props.onResizeStart,
+    onResizeStep = props.onResizeStep,
     rest = _objectWithoutProperties(props, _excluded);
   var _useContext = useContext(TableCtx),
     prefixCls = _useContext.prefixCls;
@@ -125,6 +130,36 @@ var HeadCell = function HeadCell(props) {
     }, renderTitle(), renderFilter());
   };
   var cls = clsx("".concat(prefixCls, "-cell"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-cell-fixed-").concat(fixed), fixed), "".concat(prefixCls, "-cell-fixed-").concat(fixed, "-last"), isFixedLeftLast), "".concat(prefixCls, "-cell-fixed-").concat(fixed, "-first"), isFixedRightFirst), "".concat(prefixCls, "-cell-operate-hover"), tableActionBarShowOnHover), className);
+
+  // `resizeKey` is only stamped onto leaf columns, so it doubles as the guard that
+  // keeps handles off group header cells (whose width is the sum of their leaves).
+  var showResizeHandle = !!(resizable && resizeKey && onResizeStart);
+  var isResizing = !!resizeKey && resizingKey === resizeKey;
+  var renderResizeHandle = function renderResizeHandle() {
+    if (!showResizeHandle) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": tableLocale.resizeColumn || 'Drag to resize column',
+      tabIndex: 0,
+      className: clsx("".concat(prefixCls, "-resize-handle"), _defineProperty({}, "".concat(prefixCls, "-resize-handle-active"), isResizing)),
+      onPointerDown: function onPointerDown(event) {
+        return onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(event, resizeKey);
+      }
+      // The whole title area is a sort trigger, and a resize drag ends with a
+      // click on top of it; swallow it so dragging never toggles the sorter.
+      ,
+      onClick: function onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+        event.preventDefault();
+        onResizeStep === null || onResizeStep === void 0 || onResizeStep(resizeKey, event.key === 'ArrowLeft' ? -1 : 1);
+      }
+    });
+  };
   var getThProps = function getThProps() {
     var styles = _objectSpread(_objectSpread({}, style), {}, {
       width: width,
@@ -143,9 +178,9 @@ var HeadCell = function HeadCell(props) {
   var thProps = getThProps();
   var renderCell = function renderCell() {
     if (!filter && !sorter) {
-      return /*#__PURE__*/React.createElement("th", thProps, title);
+      return /*#__PURE__*/React.createElement("th", thProps, title, renderResizeHandle());
     }
-    return /*#__PURE__*/React.createElement("th", thProps, renderCellWithAction());
+    return /*#__PURE__*/React.createElement("th", thProps, renderCellWithAction(), renderResizeHandle());
   };
   var cell = renderCell();
   return cell;