@kdcloudjs/table 1.0.0

package/lib/table/pipeline/features/columnFilter.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { Filters, FilterItem } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface FilterFeatureOptions {
+    /** (非受控用法) 默认的过滤字段列表 */
+    defaultFilters?: Filters;
+    /** (受控用法) 过滤字段列表 */
+    filters?: Filters;
+    /** 更新过滤字段列表的回调函数 */
+    onChangeFilters?(nextFilters: Filters, currentFilter: FilterItem): void;
+    /** 是否保持 dataSource 不变 */
+    keepDataSource?: boolean;
+    /** 过滤模式。单列过滤 single，多列过滤 multiple，默认为多选 */
+    mode?: 'single' | 'multiple';
+    /**过滤图标 */
+    filterIcon?: ReactNode;
+    /** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+}
+export declare function filter(opts?: FilterFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/columnFilter.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filter = filter;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _filter2 = require("./filter");
+
+var _styles = require("../../base/styles");
+
+var stateKey = 'filter';
+
+function filter() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function step(pipeline) {
+    var _a, _b;
+
+    var dataSource = pipeline.getDataSource();
+    var columns = pipeline.getColumns();
+    var filters = opts.filters,
+        defaultFilters = opts.defaultFilters,
+        onChangeFilters = opts.onChangeFilters,
+        keepDataSource = opts.keepDataSource,
+        mode = opts.mode,
+        filterIcon = opts.filterIcon,
+        stopClickEventPropagation = opts.stopClickEventPropagation;
+    var inputFilters = (_b = (_a = filters !== null && filters !== void 0 ? filters : pipeline.getStateAtKey(stateKey)) !== null && _a !== void 0 ? _a : defaultFilters) !== null && _b !== void 0 ? _b : [];
+    inputFilters = mode === 'single' ? (0, _slice.default)(inputFilters).call(inputFilters, 0, 1) : inputFilters;
+    var inputFiltersMap = new _map.default((0, _map2.default)(inputFilters).call(inputFilters, function (filterItem) {
+      return [filterItem.code, (0, _extends2.default)({}, filterItem)];
+    }));
+
+    function processColumns(columns) {
+      return (0, _map2.default)(columns).call(columns, dfs);
+
+      function dfs(col) {
+        var _a, _b, _c, _d, _e;
+
+        var result = (0, _extends2.default)({}, col);
+        var filterable = col.code && ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable);
+        var filterActive = filterable && ((_c = (_b = inputFiltersMap === null || inputFiltersMap === void 0 ? void 0 : inputFiltersMap.get(col.code)) === null || _b === void 0 ? void 0 : (0, _filter.default)(_b)) === null || _c === void 0 ? void 0 : _c.length) > 0;
+
+        if (filterable) {
+          var _context, _context2, _cx;
+
+          var handleFilterChanged = function handleFilterChanged(filterItem) {
+            var nextFiltersMap = new _map.default(inputFiltersMap);
+            var currentFilter = (0, _extends2.default)({
+              code: col.code
+            }, filterItem);
+
+            if (filterItem == null) {
+              nextFiltersMap.delete(col.code);
+            } else {
+              if (mode === 'single') {
+                nextFiltersMap.clear();
+              }
+
+              nextFiltersMap.set(col.code, currentFilter);
+            }
+
+            var nextFilters = (0, _from.default)((0, _values.default)(nextFiltersMap).call(nextFiltersMap));
+            onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(nextFilters, currentFilter);
+            pipeline.setStateAtKey(stateKey, nextFilters);
+          };
+
+          var setFilter = function setFilter(filter, filterCondition) {
+            handleFilterChanged(!filter ? undefined : {
+              code: col.code,
+              filter: filter,
+              filterCondition: filterCondition
+            });
+          };
+
+          var filterPanel = (_d = col.features) === null || _d === void 0 ? void 0 : _d.filterPanel;
+          result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_e = result.title) !== null && _e !== void 0 ? _e : [_internals.internals.safeRenderHeader((0, _extends2.default)((0, _extends2.default)({}, col), {
+            title: null
+          }))])), [/*#__PURE__*/_react.default.createElement(_filter2.Filter, {
+            key: "filter",
+            FilterPanelContent: filterPanel,
+            filterIcon: filterIcon,
+            filterModel: inputFiltersMap.get(col.code),
+            setFilterModel: handleFilterChanged,
+            setFilter: setFilter,
+            isFilterActive: filterActive,
+            className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableFilterTrigger, true), (0, _defineProperty2.default)(_cx, "active", filterActive), _cx)),
+            stopClickEventPropagation: stopClickEventPropagation
+          })]);
+          result.headerCellProps = (0, _utils.mergeCellProps)(col.headerCellProps, {
+            style: {
+              paddingRight: '18px'
+            }
+          });
+        }
+
+        if (!(0, _utils.isLeafNode)(col)) {
+          var _context3;
+
+          result.children = (0, _map2.default)(_context3 = col.children).call(_context3, dfs);
+        }
+
+        return result;
+      }
+    }
+
+    function processDataSource(dataSource) {
+      var _context4, _context5;
+
+      var filtersKeys = [];
+      inputFiltersMap.forEach(function (value, key) {
+        filtersKeys.push(key);
+      });
+
+      if (keepDataSource || filtersKeys.length <= 0) {
+        return dataSource;
+      }
+
+      var columns = pipeline.getColumns();
+      var columnsMap = new _map.default((0, _map2.default)(_context4 = (0, _filter.default)(_context5 = (0, _utils.collectNodes)(columns, 'leaf-only')).call(_context5, function (col) {
+        var _a, _b;
+
+        return ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable) !== false && ((_b = col.features) === null || _b === void 0 ? void 0 : _b.filterable) != null;
+      })).call(_context4, function (col) {
+        return [col.code, col];
+      }));
+      var defaultFilterOptionsMap = new _map.default((0, _map2.default)(_filter2.DEFAULT_FILTER_OPTIONS).call(_filter2.DEFAULT_FILTER_OPTIONS, function (item) {
+        return [item.key, (0, _extends2.default)({}, item)];
+      }));
+
+      function isMatchedFilterCondition(record) {
+        return !filtersKeys.some(function (key) {
+          var _a, _b;
+
+          var filterItem = inputFiltersMap.get(key);
+          var filterable = (_b = (_a = columnsMap.get(key)) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.filterable;
+          var comparisonFn;
+
+          if (typeof filterable === 'function') {
+            comparisonFn = filterable;
+          } else if (defaultFilterOptionsMap.get(filterItem.filterCondition)) {
+            comparisonFn = (0, _filter.default)(defaultFilterOptionsMap.get(filterItem.filterCondition));
+          } else {
+            console.warn("\u5217[".concat(key, "]\u672A\u914D\u7F6E\u7B5B\u9009\u51FD\u6570\uFF0C\u8BF7\u8BBE\u7F6E column.features.filterable \u6765\u4F5C\u4E3A\u8BE5\u5217\u7684\u7B5B\u9009\u51FD\u6570, \u76EE\u524D\u4F7F\u7528\u9ED8\u8BA4\u5305\u542B\u7B5B\u9009\u51FD\u6570"));
+            comparisonFn = (0, _filter.default)(defaultFilterOptionsMap.get('contain'));
+          }
+
+          return !comparisonFn((0, _filter.default)(filterItem))(record[key]); //不符合过滤条件,退出循环
+        });
+      }
+
+      return (0, _reduce.default)(dataSource).call(dataSource, function (pre, record) {
+        if (isMatchedFilterCondition(record)) {
+          return (0, _concat.default)(pre).call(pre, [record]);
+        }
+
+        return pre;
+      }, []);
+    }
+
+    pipeline.dataSource(processDataSource(dataSource));
+    pipeline.columns(processColumns(columns));
+    return pipeline;
+  };
+}

package/lib/table/pipeline/features/columnHover.d.ts

@@ -0,0 +1,12 @@
+import { TablePipeline } from '../pipeline';
+export interface ColumnHoverFeatureOptions {
+    /** 鼠标悬停的颜色，默认为 'var(--hover-bgcolor)' */
+    hoverColor?: string;
+    /** 非受控用法：默认的 colIndex */
+    defaultHoverColIndex?: number;
+    /** 受控用法：当前鼠标悬停列的下标（colIndex) */
+    hoverColIndex?: number;
+    /** 受控用法：colIndex 改变的回调 */
+    onChangeHoverColIndex?(nextColIndex: number): void;
+}
+export declare function columnHover(opts?: ColumnHoverFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/columnHover.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnHover = columnHover;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _utils = require("../../utils");
+
+function columnHover() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var stateKey = 'columnHover';
+  return function (pipeline) {
+    var _a, _b, _c, _d;
+
+    var hoverColor = (_a = opts.hoverColor) !== null && _a !== void 0 ? _a : 'var(--hover-bgcolor)';
+    var hoverColIndex = (_d = (_c = (_b = opts.hoverColIndex) !== null && _b !== void 0 ? _b : pipeline.getStateAtKey(stateKey)) !== null && _c !== void 0 ? _c : opts.defaultHoverColIndex) !== null && _d !== void 0 ? _d : -1;
+
+    var onChangeHoverColIndex = function onChangeHoverColIndex(nextColIndex) {
+      var _a;
+
+      pipeline.setStateAtKey(stateKey, nextColIndex);
+      (_a = opts.onChangeHoverColIndex) === null || _a === void 0 ? void 0 : _a.call(opts, nextColIndex);
+    };
+
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col, _ref) {
+      var startIndex = _ref.startIndex,
+          endIndex = _ref.endIndex;
+      var range = {
+        start: startIndex,
+        end: endIndex
+      };
+
+      if (!(0, _utils.isLeafNode)(col)) {
+        return col;
+      }
+
+      var colIndexMatched = range.start <= hoverColIndex && hoverColIndex < range.end;
+      var prevGetCellProps = col.getCellProps;
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          return (0, _utils.mergeCellProps)(prevCellProps, {
+            style: {
+              '--bgcolor': colIndexMatched ? hoverColor : undefined
+            },
+            onMouseEnter: function onMouseEnter() {
+              onChangeHoverColIndex(range.start);
+            },
+            onMouseLeave: function onMouseLeave() {
+              onChangeHoverColIndex(-1);
+            }
+          });
+        }
+      });
+    }));
+  };
+}

package/lib/table/pipeline/features/columnRangeHover.d.ts

@@ -0,0 +1,15 @@
+import { HoverRange } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface ColumnRangeHoverFeatureOptions {
+    /** 鼠标悬停时单元格的背景色，默认为 'var(--hover-bgcolor)' */
+    hoverColor?: string;
+    /** 鼠标悬停时表头的背景色，默认为 'var(--header-hover-bgcolor)' */
+    headerHoverColor?: string;
+    /** 非受控用法：默认的悬停范围 */
+    defaultHoverRange?: HoverRange;
+    /** 受控用法：当前悬停范围 */
+    hoverRange?: HoverRange;
+    /** 受控用法：悬停渲染改变的回调 */
+    onChangeHoverRange?(nextColIndexRange: HoverRange): void;
+}
+export declare function columnRangeHover(opts?: ColumnRangeHoverFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/columnRangeHover.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnRangeHover = columnRangeHover;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _utils = require("../../utils");
+
+var EMPTY_RANGE = {
+  start: -1,
+  end: -1
+};
+
+function columnRangeHover() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var stateKey = 'columnHover';
+  return function columnRangeHoverStep(pipeline) {
+    var _a, _b, _c, _d, _e;
+
+    var hoverRange = (_c = (_b = (_a = opts.hoverRange) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : opts.defaultHoverRange) !== null && _c !== void 0 ? _c : EMPTY_RANGE;
+    var hoverColor = (_d = opts.hoverColor) !== null && _d !== void 0 ? _d : 'var(--hover-bgcolor)';
+    var headerHoverColor = (_e = opts.headerHoverColor) !== null && _e !== void 0 ? _e : 'var(--header-hover-bgcolor)';
+
+    var onChangeHoverRange = function onChangeHoverRange(nextColIndexRange) {
+      var _a;
+
+      pipeline.setStateAtKey(stateKey, nextColIndexRange);
+      (_a = opts.onChangeHoverRange) === null || _a === void 0 ? void 0 : _a.call(opts, nextColIndexRange);
+    };
+
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col, _ref) {
+      var startIndex = _ref.startIndex,
+          endIndex = _ref.endIndex;
+      var colRange = {
+        start: startIndex,
+        end: endIndex
+      };
+      var match = colRange.end > hoverRange.start && hoverRange.end > colRange.start;
+
+      if (!(0, _utils.isLeafNode)(col)) {
+        if (headerHoverColor == null) {
+          return col;
+        }
+
+        return (0, _extends2.default)((0, _extends2.default)({}, col), {
+          headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps, {
+            onMouseEnter: function onMouseEnter() {
+              onChangeHoverRange(colRange);
+            },
+            onMouseLeave: function onMouseLeave() {
+              onChangeHoverRange(EMPTY_RANGE);
+            },
+            style: {
+              '--header-bgcolor': match ? headerHoverColor : undefined
+            }
+          })
+        });
+      }
+
+      var prevGetCellProps = col.getCellProps;
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps, {
+          onMouseEnter: function onMouseEnter() {
+            onChangeHoverRange(colRange);
+          },
+          onMouseLeave: function onMouseLeave() {
+            onChangeHoverRange(EMPTY_RANGE);
+          },
+          style: {
+            '--header-bgcolor': match ? headerHoverColor : undefined
+          }
+        }),
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          return (0, _utils.mergeCellProps)(prevCellProps, {
+            onMouseEnter: function onMouseEnter() {
+              onChangeHoverRange(colRange);
+            },
+            onMouseLeave: function onMouseLeave() {
+              onChangeHoverRange(EMPTY_RANGE);
+            },
+            style: {
+              '--bgcolor': match ? hoverColor : undefined
+            }
+          });
+        }
+      });
+    }));
+  };
+}

package/lib/table/pipeline/features/columnResizeWidth.d.ts

@@ -0,0 +1,21 @@
+import { TablePipeline } from '../pipeline';
+interface ColumnSize {
+    [key: string]: number;
+}
+interface ChangedColumnSize {
+    code: string;
+    width: number;
+}
+export interface ColumnResizeOptions {
+    columnSize?: ColumnSize;
+    /** 列的最小宽度，默认为 60 */
+    minSize?: number;
+    /** 如果列宽数组中没有提供有效的宽度，fallbackSize 将作为该列的宽度，默认为 150 */
+    fallbackSize?: number;
+    /** 列的最大宽度，默认为 1000 */
+    maxSize?: number;
+    onChangeSize?(nextSize: ColumnSize): void;
+    afterChangeSize?(nextSize: ColumnSize, changedColumnSize: ChangedColumnSize[]): void;
+}
+export declare function columnResize(opts?: ColumnResizeOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};

package/lib/table/pipeline/features/columnResizeWidth.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnResize = columnResize;
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rxjs = require("rxjs");
+
+var op = _interopRequireWildcard(require("rxjs/operators"));
+
+var _utils = require("../../utils");
+
+var _internals = require("../../internals");
+
+var _styles = require("../../base/styles");
+
+var _templateObject, _templateObject2;
+
+var TableHeaderCellResize = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    left: calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n    background-color: var(--border-color);\n  }\n"])));
+
+var TableHeaderGroupCellResize = (0, _styledComponents.default)(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
+
+function clamp(min, x, max) {
+  return Math.max(min, Math.min(max, x));
+}
+
+function disableSelect(event) {
+  event.preventDefault();
+}
+
+function columnResize() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _a, _b, _c;
+
+  var stateKey = 'columnResize';
+  var minSize = (_a = opts.minSize) !== null && _a !== void 0 ? _a : 60;
+  var fallbackSize = (_b = opts.fallbackSize) !== null && _b !== void 0 ? _b : 150;
+  var maxSize = (_c = opts.maxSize) !== null && _c !== void 0 ? _c : 1000;
+  return function columnResizeFeature(pipeline) {
+    var _a, _b, _c;
+
+    var columnSize = (_b = (_a = opts.columnSize) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
+    var leafColumns = (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only');
+    leafColumns.forEach(function (_ref) {
+      var code = _ref.code,
+          width = _ref.width;
+
+      if (columnSize[code] === undefined) {
+        if (typeof width === 'number') {
+          columnSize[code] = width;
+        } else {
+          columnSize[code] = fallbackSize;
+        }
+      }
+    }); // 初始化 || opts.columnSize发生变化（为了autofill时能取到最新值）
+
+    if (!pipeline.getStateAtKey(stateKey) || ((_c = pipeline.ref) === null || _c === void 0 ? void 0 : _c.current.lastOptColumnSize) !== opts.columnSize) {
+      pipeline.setStateAtKey(stateKey, columnSize);
+    }
+
+    if (pipeline.ref) {
+      pipeline.ref.current.lastOptColumnSize = opts.columnSize;
+    }
+
+    var onChangeSize = function onChangeSize(nextColumnSize) {
+      window.requestAnimationFrame(function () {
+        var _a;
+
+        pipeline.setStateAtKey(stateKey, nextColumnSize);
+        (_a = opts === null || opts === void 0 ? void 0 : opts.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, nextColumnSize);
+
+        if (opts.columnSize) {
+          if (pipeline.ref) {
+            pipeline.ref.current.lastOptColumnSize = nextColumnSize; // 这里记录由列宽拖拽导致的opts.columnSize变化,避免重复渲染
+          }
+        }
+      });
+    };
+
+    var handleMouseDown = function handleMouseDown(e, col) {
+      window.addEventListener('selectstart', disableSelect);
+      var changedColumnSize = {};
+      var startX = e.clientX;
+      var children = col.children,
+          code = col.code;
+      var recordColumnSize = columnSize;
+      e.stopPropagation();
+      var nextSize$ = (0, _rxjs.fromEvent)(window, 'mousemove').pipe(op.takeUntil((0, _rxjs.fromEvent)(window, 'mouseup')), op.map(function (e) {
+        var movingX = e.clientX;
+        var nextColumnSize = (0, _extends2.default)({}, columnSize);
+        var deltaSum = movingX - startX;
+        var deltaRemaining = deltaSum;
+
+        if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
+          var leafChildColumns = (0, _utils.collectNodes)(children, 'leaf-only');
+          var childrenWidthSum = (0, _reduce.default)(leafChildColumns).call(leafChildColumns, function (sum, _ref2) {
+            var code = _ref2.code;
+            return sum + columnSize[code];
+          }, 0);
+          leafChildColumns.forEach(function (_ref3, index) {
+            var code = _ref3.code;
+            var startSize = columnSize[code];
+            var currentDeltaWidth = Math.round(deltaSum * startSize / childrenWidthSum);
+
+            if (index < leafChildColumns.length - 1) {
+              nextColumnSize[code] = clamp(minSize, startSize + currentDeltaWidth, maxSize);
+              changedColumnSize[code] = nextColumnSize[code];
+              deltaRemaining -= currentDeltaWidth;
+            } else {
+              nextColumnSize[code] = clamp(minSize, startSize + deltaRemaining, maxSize);
+              changedColumnSize[code] = nextColumnSize[code];
+            }
+          });
+        } else {
+          var startSize = columnSize[code];
+          nextColumnSize[code] = clamp(minSize, startSize + deltaSum, maxSize);
+          changedColumnSize[code] = nextColumnSize[code];
+        }
+
+        recordColumnSize = nextColumnSize;
+        return nextColumnSize;
+      }));
+      nextSize$.subscribe({
+        next: onChangeSize,
+        complete: function complete() {
+          var _context;
+
+          var changedColumnSizes = (0, _map.default)(_context = (0, _keys.default)(changedColumnSize)).call(_context, function (code) {
+            return {
+              code: code,
+              width: changedColumnSize[code]
+            };
+          });
+          window.requestAnimationFrame(function () {
+            var _a;
+
+            (_a = opts === null || opts === void 0 ? void 0 : opts.afterChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, recordColumnSize, changedColumnSizes);
+          });
+          window.removeEventListener('selectstart', disableSelect);
+        }
+      });
+    };
+
+    var isGroup = (0, _utils.isGroupColumn)(pipeline.getColumns());
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
+      var _a;
+
+      var prevTitle = _internals.internals.safeRenderHeader(col);
+
+      var code = col.code,
+          features = col.features,
+          width = col.width;
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        width: (_a = columnSize[code]) !== null && _a !== void 0 ? _a : width,
+        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle, (features === null || features === void 0 ? void 0 : features.resizeable) !== false && (isGroup ? /*#__PURE__*/_react.default.createElement(TableHeaderGroupCellResize, {
+          className: _styles.Classes.tableHeaderCellResize,
+          onMouseDown: function onMouseDown(e) {
+            return handleMouseDown(e, col);
+          }
+        }) : /*#__PURE__*/_react.default.createElement(TableHeaderCellResize, {
+          className: _styles.Classes.tableHeaderCellResize,
+          onMouseDown: function onMouseDown(e) {
+            return handleMouseDown(e, col);
+          }
+        }))),
+        headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps, {
+          className: 'resizeable'
+        })
+      });
+    }));
+  };
+}

package/lib/table/pipeline/features/contextMenu.d.ts

@@ -0,0 +1,14 @@
+import { TablePipeline } from '../pipeline';
+interface ContextMenuItem {
+    name: string;
+    action: () => {};
+    disabled?: boolean;
+}
+export interface ContextMenuFeatureOptions {
+    /** 获得自定义菜单 */
+    getContextMenuItems?: (params: any) => ContextMenuItem[];
+    /** 弹出框的父容器 */
+    popupParent?: HTMLElement;
+}
+export declare function contextMenu(opts?: ContextMenuFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};