@kdcloudjs/table 1.0.0

package/es/table/pipeline/features/columnDrag.d.ts

@@ -0,0 +1,6 @@
+import { TablePipeline } from '../pipeline';
+import { ArtColumn } from '../../interfaces';
+export interface ColumnDragOptions {
+    onColumnDragStopped?: (columnMoved: boolean, columns: ArtColumn[]) => void;
+}
+export declare function columnDrag(opts?: ColumnDragOptions): (pipeline: TablePipeline) => TablePipeline;

package/es/table/pipeline/features/columnDrag.js

@@ -0,0 +1,265 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import { makeRecursiveMapper, mergeCellProps, collectNodes } from '../../utils';
+import { FILL_COLUMN_CODE } from './autoFill';
+var stateKey = 'columnDrag';
+
+function sortColumns(cloumns, sort) {
+  var res = new Array(cloumns.length);
+
+  while (cloumns.length) {
+    var cloumn = cloumns.pop();
+    res[sort[cloumn.code]] = cloumn;
+  }
+
+  return res;
+}
+
+export function columnDrag() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (pipeline) {
+    var _pipeline$getStateAtK = pipeline.getStateAtKey(stateKey, {}),
+        cloumnsSortData = _pipeline$getStateAtK.cloumnsSortData,
+        cloumnsTranslateData = _pipeline$getStateAtK.cloumnsTranslateData;
+
+    var columns = pipeline.getColumns();
+
+    if (cloumnsSortData) {
+      columns = sortColumns(columns, cloumnsSortData);
+    }
+
+    pipeline.columns(_filterInstanceProperty(columns).call(columns, function (column) {
+      return column;
+    }));
+    return pipeline.mapColumns(makeRecursiveMapper(function (col) {
+      var style = cloumnsTranslateData ? {
+        transition: '.3s',
+        transform: "translate3d(".concat(cloumnsTranslateData[col.code], "px, 0px, 0px)")
+      } : {};
+      var prevGetCellProps = col.getCellProps; // !col.code: 选择列 col.lock: 固定列 不允许拖拽
+
+      if (col.lock || !col.code) return col;
+      return _extends(_extends({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          return mergeCellProps(prevCellProps, {
+            style: style
+          });
+        },
+        headerCellProps: mergeCellProps(col.headerCellProps, {
+          onMouseDown: function onMouseDown(e) {
+            if (e.button !== 0) {
+              return;
+            } // const cx = e.clientX
+            // const width = col.width
+            // const a = startIndex
+            // const b = endIndex
+            // const newColumnDragData = [...columnDragData]
+            // let newColumn = [...columns]
+            // let newStartIndex = startIndex
+            // let endIdx = endIndex
+
+
+            var columnMoved = false;
+            var columns = pipeline.getColumns();
+
+            var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
+                cloumnsSortData = _pipeline$getStateAtK2.cloumnsSortData,
+                cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
+
+            if (cloumnsSortData) {
+              columns = sortColumns(columns, cloumnsSortData);
+            } else {
+              cloumnsSortData = {};
+              columns.forEach(function (item, index) {
+                cloumnsSortData[item.code] = index;
+              });
+            }
+
+            var currentTarget = e.currentTarget;
+            var rect = e.currentTarget.parentElement.getClientRects()[0];
+            var startX = rect.left;
+            var moveData = [];
+
+            function handleMouseMove(e) {
+              if (e.clientX - startX < 20) {
+                return;
+              } else {
+                e.stopPropagation();
+              }
+
+              document.body.style.userSelect = 'none';
+              currentTarget.style.cursor = 'move'; // 计算平移位置
+
+              var replaceIndex = 0;
+              var totalWitdth = columns[replaceIndex].width;
+
+              while (totalWitdth < e.clientX - startX && replaceIndex < columns.length - 1) {
+                replaceIndex++;
+                totalWitdth += columns[replaceIndex].width;
+              } // 重置位置信息
+
+
+              cloumnsTranslateData = {};
+              columns.forEach(function (item) {
+                cloumnsTranslateData[item.code] = 0;
+              }); // 循环计算每一个的位置
+              // if (startIndex !== replaceIndex) {
+              //   const optionColumn = columns[startIndex]
+              //   const move = startIndex > replaceIndex ? 1 : -1
+              //   let index = Math.min(startIndex, replaceIndex)
+              //   while (index < Math.max(startIndex, replaceIndex)) {
+              //     const code = columns[index].code
+              //     cloumnsTranslateData[code] += move * optionColumn.width
+              //     cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
+              //     index += move
+              //   }
+              // }
+              // const opColumn = columns[startIndex]
+              // let index = Math.min(startIndex, replaceIndex)
+              // while (index <= Math.max(startIndex, replaceIndex)) {
+              //   const code = columns[index].code
+              //   if (index !== startIndex && index !== replaceIndex) {
+              //     cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
+              //     cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
+              //   }
+              //   index++
+              // }
+              // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
+
+              var startIndex;
+              var leafColumns = collectNodes(collectNodes(columns, 'leaf-only'));
+              leafColumns.forEach(function (column, index) {
+                if (column.code === col.code) {
+                  startIndex = index;
+                }
+              });
+              var optionColumn = columns[startIndex];
+              var index = replaceIndex;
+
+              if (startIndex > replaceIndex) {
+                // 左移
+                while (index < startIndex) {
+                  var code = columns[index].code;
+
+                  if (code && code !== FILL_COLUMN_CODE && !columns[index].lock) {
+                    cloumnsTranslateData[code] += optionColumn.width;
+                    cloumnsTranslateData[optionColumn.code] -= columns[index].width;
+                    columnMoved = true;
+                  }
+
+                  index++;
+                }
+              } else if (startIndex < replaceIndex) {
+                // 右移
+                while (startIndex < index) {
+                  var _code = columns[index].code;
+
+                  if (_code && _code !== FILL_COLUMN_CODE && !columns[index].lock) {
+                    cloumnsTranslateData[_code] -= optionColumn.width;
+                    cloumnsTranslateData[optionColumn.code] += columns[index].width;
+                    columnMoved = true;
+                  }
+
+                  index--;
+                }
+              } else {// 不动或者移动回原位
+              }
+
+              window.requestAnimationFrame(function () {
+                pipeline.setStateAtKey(stateKey, {
+                  cloumnsSortData: cloumnsSortData,
+                  cloumnsTranslateData: cloumnsTranslateData
+                });
+                moveData = [startIndex, replaceIndex];
+              });
+            }
+
+            function handleMouseUp(e) {
+              e.stopPropagation();
+              document.body.removeEventListener('mousemove', handleMouseMove);
+              document.body.removeEventListener('mouseup', handleMouseUp);
+              window.requestAnimationFrame(function () {
+                var _moveData = moveData,
+                    _moveData2 = _slicedToArray(_moveData, 2),
+                    startIndex = _moveData2[0],
+                    replaceIndex = _moveData2[1];
+
+                var optionColumn = columns[startIndex]; // const move = startIndex > replaceIndex ? 1 : -1
+                // let index = Math.min(startIndex, replaceIndex)
+                // while (index < Math.max(startIndex, replaceIndex) && index > 0) {
+                //   const code = columns[index].code
+                //   cloumnsSortData[optionColumn.code] -= move
+                //   cloumnsSortData[code] += move
+                //   index += move
+                // }
+
+                var index = replaceIndex;
+
+                if (startIndex > replaceIndex) {
+                  // 左移
+                  while (index < startIndex) {
+                    var code = columns[index].code;
+
+                    if (code && code !== FILL_COLUMN_CODE && !columns[index].lock) {
+                      cloumnsSortData[code] += 1;
+                      cloumnsSortData[optionColumn.code] -= 1;
+                      columnMoved = true;
+                    }
+
+                    index++;
+                  }
+                } else if (startIndex < replaceIndex) {
+                  // 右移
+                  while (index > startIndex) {
+                    var _code2 = columns[index].code;
+
+                    if (_code2 && _code2 !== FILL_COLUMN_CODE && !columns[index].lock) {
+                      cloumnsSortData[_code2] -= 1;
+                      cloumnsSortData[optionColumn.code] += 1;
+                      columnMoved = true;
+                    }
+
+                    index--;
+                  }
+                }
+
+                var onColumnDragStopped = opts.onColumnDragStopped; // 拖拽结束返回列顺序
+
+                if (onColumnDragStopped) {
+                  var _context;
+
+                  var newColumns = _filterInstanceProperty(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (_ref) {
+                    var code = _ref.code;
+                    return code !== FILL_COLUMN_CODE;
+                  }); // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
+
+
+                  onColumnDragStopped(columnMoved, newColumns);
+                }
+
+                pipeline.setStateAtKey(stateKey, {
+                  cloumnsSortData: cloumnsSortData,
+                  cloumnsTranslateData: null
+                });
+              });
+              document.body.style.userSelect = '';
+              currentTarget.style.opacity = '';
+              currentTarget.style.cursor = '';
+              currentTarget = null;
+            }
+
+            document.body.addEventListener('mousemove', handleMouseMove);
+            document.body.addEventListener('mouseup', handleMouseUp);
+
+            document.body.onselectstart = function () {
+              return false;
+            };
+          },
+          style: style
+        })
+      });
+    }));
+  };
+}

package/es/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/es/table/pipeline/features/columnFilter.js

@@ -0,0 +1,173 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import React from 'react';
+import cx from 'classnames';
+import { internals } from '../../internals';
+import { isLeafNode, mergeCellProps, collectNodes } from '../../utils';
+import { Filter, DEFAULT_FILTER_OPTIONS } from './filter';
+import { Classes } from '../../base/styles';
+var stateKey = 'filter';
+export 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' ? _sliceInstanceProperty(inputFilters).call(inputFilters, 0, 1) : inputFilters;
+    var inputFiltersMap = new _Map(_mapInstanceProperty(inputFilters).call(inputFilters, function (filterItem) {
+      return [filterItem.code, _extends({}, filterItem)];
+    }));
+
+    function processColumns(columns) {
+      return _mapInstanceProperty(columns).call(columns, dfs);
+
+      function dfs(col) {
+        var _a, _b, _c, _d, _e;
+
+        var result = _extends({}, 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 : _filterInstanceProperty(_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(inputFiltersMap);
+
+            var currentFilter = _extends({
+              code: col.code
+            }, filterItem);
+
+            if (filterItem == null) {
+              nextFiltersMap.delete(col.code);
+            } else {
+              if (mode === 'single') {
+                nextFiltersMap.clear();
+              }
+
+              nextFiltersMap.set(col.code, currentFilter);
+            }
+
+            var nextFilters = _Array$from(_valuesInstanceProperty(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 = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_concatInstanceProperty(_context2 = []).call(_context2, (_e = result.title) !== null && _e !== void 0 ? _e : [internals.safeRenderHeader(_extends(_extends({}, col), {
+            title: null
+          }))])), [/*#__PURE__*/React.createElement(Filter, {
+            key: "filter",
+            FilterPanelContent: filterPanel,
+            filterIcon: filterIcon,
+            filterModel: inputFiltersMap.get(col.code),
+            setFilterModel: handleFilterChanged,
+            setFilter: setFilter,
+            isFilterActive: filterActive,
+            className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
+            stopClickEventPropagation: stopClickEventPropagation
+          })]);
+          result.headerCellProps = mergeCellProps(col.headerCellProps, {
+            style: {
+              paddingRight: '18px'
+            }
+          });
+        }
+
+        if (!isLeafNode(col)) {
+          var _context3;
+
+          result.children = _mapInstanceProperty(_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(_mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = 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(_mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (item) {
+        return [item.key, _extends({}, 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 = _filterInstanceProperty(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 = _filterInstanceProperty(defaultFilterOptionsMap.get('contain'));
+          }
+
+          return !comparisonFn(_filterInstanceProperty(filterItem))(record[key]); //不符合过滤条件,退出循环
+        });
+      }
+
+      return _reduceInstanceProperty(dataSource).call(dataSource, function (pre, record) {
+        if (isMatchedFilterCondition(record)) {
+          return _concatInstanceProperty(pre).call(pre, [record]);
+        }
+
+        return pre;
+      }, []);
+    }
+
+    pipeline.dataSource(processDataSource(dataSource));
+    pipeline.columns(processColumns(columns));
+    return pipeline;
+  };
+}

package/es/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/es/table/pipeline/features/columnHover.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { isLeafNode, makeRecursiveMapper, mergeCellProps } from '../../utils';
+export 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(makeRecursiveMapper(function (col, _ref) {
+      var startIndex = _ref.startIndex,
+          endIndex = _ref.endIndex;
+      var range = {
+        start: startIndex,
+        end: endIndex
+      };
+
+      if (!isLeafNode(col)) {
+        return col;
+      }
+
+      var colIndexMatched = range.start <= hoverColIndex && hoverColIndex < range.end;
+      var prevGetCellProps = col.getCellProps;
+      return _extends(_extends({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          return mergeCellProps(prevCellProps, {
+            style: {
+              '--bgcolor': colIndexMatched ? hoverColor : undefined
+            },
+            onMouseEnter: function onMouseEnter() {
+              onChangeHoverColIndex(range.start);
+            },
+            onMouseLeave: function onMouseLeave() {
+              onChangeHoverColIndex(-1);
+            }
+          });
+        }
+      });
+    }));
+  };
+}

package/es/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/es/table/pipeline/features/columnRangeHover.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { isLeafNode, makeRecursiveMapper, mergeCellProps } from '../../utils';
+var EMPTY_RANGE = {
+  start: -1,
+  end: -1
+};
+export 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(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 (!isLeafNode(col)) {
+        if (headerHoverColor == null) {
+          return col;
+        }
+
+        return _extends(_extends({}, col), {
+          headerCellProps: 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 _extends(_extends({}, col), {
+        headerCellProps: 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 mergeCellProps(prevCellProps, {
+            onMouseEnter: function onMouseEnter() {
+              onChangeHoverRange(colRange);
+            },
+            onMouseLeave: function onMouseLeave() {
+              onChangeHoverRange(EMPTY_RANGE);
+            },
+            style: {
+              '--bgcolor': match ? hoverColor : undefined
+            }
+          });
+        }
+      });
+    }));
+  };
+}

package/es/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 {};