@hi-ui/table 4.3.0 → 4.3.2-alpha.0

package/lib/esm/use-table.js

@@ -8,21 +8,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import { cloneTree, flattenTree, getLeafChildren, getNodeRootParent, flattedTreeSort } from '@hi-ui/tree-utils';
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { cloneTree, flattenTree, getNodeRootParent, flattedTreeSort, getLeafChildren } from '@hi-ui/tree-utils';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
-import { useColWidth } from './hooks/use-col-width.js';
-import { setColumnsDefaultWidth, parseFixedColumns } from './utils/index.js';
 import { isNullish, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import { useCheck, useSelect } from '@hi-ui/use-check';
 import { invariant } from '@hi-ui/env';
+import { setAttrStatus } from '@hi-ui/dom-utils';
+import { useCache } from '@hi-ui/use-cache';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { setColumnsDefaultWidth, parseFixedColumns } from './utils/index.js';
 import { useAsyncSwitch } from './hooks/use-async-switch.js';
 import { useExpand } from './hooks/use-expand.js';
+import { useColWidth } from './hooks/use-col-width.js';
 import { useColumns } from './hooks/use-colgroup.js';
-import { setAttrStatus } from '@hi-ui/dom-utils';
-import { useCache } from '@hi-ui/use-cache';
 import { useTableDrag } from './hooks/use-drag.js';
-import { useLatestCallback } from '@hi-ui/use-latest';
 var DEFAULT_COLUMNS = [];
 var DEFAULT_DATA = [];
 var DEFAULT_ERROR_ROW_KEYS = [];
@@ -30,74 +30,69 @@ var DEFAULT_HIGHLIGHTED_ROW_KEYS = [];
 var DEFAULT_HIGHLIGHTED_COL_KEYS = [];
 var DEFAULT_EXPAND_ROW_KEYS = [];
 var DEFAULT_FIXED_TO_COLUMN = {};
-
 var useTable = function useTable(_a) {
   var _a$data = _a.data,
-      data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
-      _a$columns = _a.columns,
-      columnsProp = _a$columns === void 0 ? DEFAULT_COLUMNS : _a$columns,
-      _a$defaultFixedToColu = _a.defaultFixedToColumn,
-      defaultFixedToColumn = _a$defaultFixedToColu === void 0 ? DEFAULT_FIXED_TO_COLUMN : _a$defaultFixedToColu,
-      fixedToColumnProp = _a.fixedToColumn,
-      onFixedToColumn = _a.onFixedToColumn,
-      scrollWidth = _a.scrollWidth,
-      _a$resizable = _a.resizable,
-      resizable = _a$resizable === void 0 ? false : _a$resizable,
-      _a$errorRowKeys = _a.errorRowKeys,
-      errorRowKeys = _a$errorRowKeys === void 0 ? DEFAULT_ERROR_ROW_KEYS : _a$errorRowKeys,
-      highlightedColKeysProp = _a.highlightedColKeys,
-      highlightedRowKeysProp = _a.highlightedRowKeys,
-      _a$showColHighlight = _a.showColHighlight,
-      showColHighlight = _a$showColHighlight === void 0 ? false : _a$showColHighlight,
-      _a$showRowHighlight = _a.showRowHighlight,
-      showRowHighlight = _a$showRowHighlight === void 0 ? true : _a$showRowHighlight,
-      _a$highlightRowOnDoub = _a.highlightRowOnDoubleClick,
-      highlightRowOnDoubleClick = _a$highlightRowOnDoub === void 0 ? true : _a$highlightRowOnDoub,
-      _a$defaultExpandedRow = _a.defaultExpandedRowKeys,
-      defaultExpandedRowKeys = _a$defaultExpandedRow === void 0 ? DEFAULT_EXPAND_ROW_KEYS : _a$defaultExpandedRow,
-      expandRowKeysProp = _a.expandedRowKeys,
-      onExpand = _a.onExpand,
-      _a$defaultExpandAll = _a.defaultExpandAll,
-      defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
-      onLoadChildren = _a.onLoadChildren,
-      maxHeight = _a.maxHeight,
-      sticky = _a.sticky,
-      _a$stickyTop = _a.stickyTop,
-      stickyTop = _a$stickyTop === void 0 ? 0 : _a$stickyTop,
-      _a$draggable = _a.draggable,
-      draggable = _a$draggable === void 0 ? false : _a$draggable,
-      onDropProp = _a.onDrop,
-      onDropEnd = _a.onDropEnd,
-      showColMenu = _a.showColMenu,
-      rowSelection = _a.rowSelection,
-      cellRender = _a.cellRender,
-      footerRender = _a.footerRender,
-      _a$fieldKey = _a.fieldKey,
-      fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
-      virtual = _a.virtual,
-      rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual"]);
+    data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
+    _a$columns = _a.columns,
+    columnsProp = _a$columns === void 0 ? DEFAULT_COLUMNS : _a$columns,
+    _a$defaultFixedToColu = _a.defaultFixedToColumn,
+    defaultFixedToColumn = _a$defaultFixedToColu === void 0 ? DEFAULT_FIXED_TO_COLUMN : _a$defaultFixedToColu,
+    fixedToColumnProp = _a.fixedToColumn,
+    onFixedToColumn = _a.onFixedToColumn,
+    scrollWidth = _a.scrollWidth,
+    _a$resizable = _a.resizable,
+    resizable = _a$resizable === void 0 ? false : _a$resizable,
+    _a$errorRowKeys = _a.errorRowKeys,
+    errorRowKeys = _a$errorRowKeys === void 0 ? DEFAULT_ERROR_ROW_KEYS : _a$errorRowKeys,
+    highlightedColKeysProp = _a.highlightedColKeys,
+    highlightedRowKeysProp = _a.highlightedRowKeys,
+    _a$showColHighlight = _a.showColHighlight,
+    showColHighlight = _a$showColHighlight === void 0 ? false : _a$showColHighlight,
+    _a$showRowHighlight = _a.showRowHighlight,
+    showRowHighlight = _a$showRowHighlight === void 0 ? true : _a$showRowHighlight,
+    _a$highlightRowOnDoub = _a.highlightRowOnDoubleClick,
+    highlightRowOnDoubleClick = _a$highlightRowOnDoub === void 0 ? true : _a$highlightRowOnDoub,
+    _a$defaultExpandedRow = _a.defaultExpandedRowKeys,
+    defaultExpandedRowKeys = _a$defaultExpandedRow === void 0 ? DEFAULT_EXPAND_ROW_KEYS : _a$defaultExpandedRow,
+    expandRowKeysProp = _a.expandedRowKeys,
+    onExpand = _a.onExpand,
+    _a$defaultExpandAll = _a.defaultExpandAll,
+    defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
+    onLoadChildren = _a.onLoadChildren,
+    maxHeight = _a.maxHeight,
+    sticky = _a.sticky,
+    _a$stickyTop = _a.stickyTop,
+    stickyTop = _a$stickyTop === void 0 ? 0 : _a$stickyTop,
+    _a$draggable = _a.draggable,
+    draggable = _a$draggable === void 0 ? false : _a$draggable,
+    onDropProp = _a.onDrop,
+    onDropEnd = _a.onDropEnd,
+    showColMenu = _a.showColMenu,
+    rowSelection = _a.rowSelection,
+    cellRender = _a.cellRender,
+    footerRender = _a.footerRender,
+    _a$fieldKey = _a.fieldKey,
+    fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
+    virtual = _a.virtual,
+    scrollbar = _a.scrollbar,
+    rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar"]);
   /**
    * 获取 key 字段值
    */
-
-
   var getRowKeyField = React__default.useCallback(function (item) {
     var val = item[fieldKey];
     invariant(!isNullish(val), 'Not found for the unique %s attribute in each row of data prop.', fieldKey);
     return val;
-  }, [fieldKey]); // ********************** cache *********************** //
-
+  }, [fieldKey]);
+  // ********************** cache *********************** //
   var _useCache = useCache(data),
-      cacheData = _useCache[0],
-      setCacheData = _useCache[1];
-
+    cacheData = _useCache[0],
+    setCacheData = _useCache[1];
   var _useCache2 = useCache(columnsProp),
-      columns = _useCache2[0];
+    columns = _useCache2[0];
   /**
    * 扁平化数据，支持树形 table
    */
-
-
   var flattedData = useMemo(function () {
     var clonedData = cloneTree(cacheData);
     return flattenTree(clonedData, function (node) {
@@ -105,92 +100,81 @@ var useTable = function useTable(_a) {
         id: getRowKeyField(node.raw)
       });
     });
-  }, [cacheData, getRowKeyField]); // ********************** 树形表格 *********************** //
-
+  }, [cacheData, getRowKeyField]);
+  // ********************** 树形表格 *********************** //
   var _useExpand = useExpand(flattedData, defaultExpandedRowKeys, expandRowKeysProp, onExpand, defaultExpandAll),
-      transitionData = _useExpand[0],
-      onExpandTreeRowsChange = _useExpand[1],
-      isExpandTreeRows = _useExpand[2]; // 异步展开子树
-
-
+    transitionData = _useExpand[0],
+    onExpandTreeRowsChange = _useExpand[1],
+    isExpandTreeRows = _useExpand[2];
+  // 异步展开子树
   var _useAsyncSwitch = useAsyncSwitch({
-    setCascaderData: setCacheData,
-    onExpand: onExpandTreeRowsChange,
-    onLoadChildren: onLoadChildren,
-    fieldKey: fieldKey
-  }),
-      isLoadingTreeNodeId = _useAsyncSwitch[0],
-      onTreeNodeSwitch = _useAsyncSwitch[1]; // ************************ 拖拽 ************************ //
-
-
+      setCascaderData: setCacheData,
+      onExpand: onExpandTreeRowsChange,
+      onLoadChildren: onLoadChildren,
+      fieldKey: fieldKey
+    }),
+    isLoadingTreeNodeId = _useAsyncSwitch[0],
+    onTreeNodeSwitch = _useAsyncSwitch[1];
+  // ************************ 拖拽 ************************ //
   var _useTableDrag = useTableDrag({
-    cacheData: cacheData,
-    setCacheData: setCacheData,
-    draggable: draggable,
-    flattedData: flattedData,
-    onDropEnd: onDropEnd,
-    onDrop: onDropProp,
-    fieldKey: fieldKey
-  }),
-      onDrop = _useTableDrag.onDrop,
-      dragRowRef = _useTableDrag.dragRowRef; // ************************ colgroup ************************ //
-
-
+      cacheData: cacheData,
+      setCacheData: setCacheData,
+      draggable: draggable,
+      flattedData: flattedData,
+      onDropEnd: onDropEnd,
+      onDrop: onDropProp,
+      fieldKey: fieldKey
+    }),
+    onDrop = _useTableDrag.onDrop,
+    dragRowRef = _useTableDrag.dragRowRef;
+  // ************************ colgroup ************************ //
   var _useColumns = useColumns({
-    columns: columns
-  }),
-      flattedColumns = _useColumns.flattedColumns,
-      mergedColumns2 = _useColumns.mergedColumns,
-      leafColumns = _useColumns.leafColumns; // ************************ 列高亮 ************************ //
-
+      columns: columns
+    }),
+    flattedColumns = _useColumns.flattedColumns,
+    mergedColumns2 = _useColumns.mergedColumns,
+    leafColumns = _useColumns.leafColumns;
+  // ************************ 列高亮 ************************ //
   /**
    * 控制列高亮，依据 column 中的 dataKey 控制
    */
-
-
   var _useUncontrolledState = useUncontrolledState(DEFAULT_HIGHLIGHTED_COL_KEYS, highlightedColKeysProp),
-      highlightedColKeys = _useUncontrolledState[0],
-      trySetHighlightedColKeys = _useUncontrolledState[1];
-
+    highlightedColKeys = _useUncontrolledState[0],
+    trySetHighlightedColKeys = _useUncontrolledState[1];
   var _useCheck = useCheck({
-    checkedIds: highlightedColKeys,
-    onCheck: trySetHighlightedColKeys,
-    idFieldName: 'dataKey'
-  }),
-      onHighlightedColChange = _useCheck[0],
-      isHighlightedCol = _useCheck[1];
+      checkedIds: highlightedColKeys,
+      onCheck: trySetHighlightedColKeys,
+      idFieldName: 'dataKey'
+    }),
+    onHighlightedColChange = _useCheck[0],
+    isHighlightedCol = _useCheck[1];
   /**
    * 设置列 hover 时高亮，依据 column 中的 dataKey 控制
    * 与 highlightedColKeys 互不影响
    */
-
-
   var _useState = useState(''),
-      hoveredColKey = _useState[0],
-      setHoveredColKey = _useState[1];
-
+    hoveredColKey = _useState[0],
+    setHoveredColKey = _useState[1];
   var _useSelect = useSelect({
-    disabled: !showColHighlight,
-    selectedId: hoveredColKey,
-    onSelect: setHoveredColKey
-  }),
-      onHoveredColChange = _useSelect[0],
-      isHoveredHighlightCol = _useSelect[1]; // ************************ 列宽 resizable ************************ //
-
-
+      disabled: !showColHighlight,
+      selectedId: hoveredColKey,
+      onSelect: setHoveredColKey
+    }),
+    onHoveredColChange = _useSelect[0],
+    isHoveredHighlightCol = _useSelect[1];
+  // ************************ 列宽 resizable ************************ //
   var _useColWidth = useColWidth({
-    data: data,
-    columns: columns,
-    resizable: resizable,
-    virtual: virtual
-  }),
-      measureRowElementRef = _useColWidth.measureRowElementRef,
-      getColgroupProps = _useColWidth.getColgroupProps,
-      onColumnResizable = _useColWidth.onColumnResizable,
-      colWidths = _useColWidth.colWidths,
-      setHeaderTableElement = _useColWidth.setHeaderTableElement; // ************************ 列冻结 ************************ //
-
-
+      data: data,
+      columns: columns,
+      resizable: resizable,
+      virtual: virtual
+    }),
+    measureRowElementRef = _useColWidth.measureRowElementRef,
+    getColgroupProps = _useColWidth.getColgroupProps,
+    onColumnResizable = _useColWidth.onColumnResizable,
+    colWidths = _useColWidth.colWidths,
+    setHeaderTableElement = _useColWidth.setHeaderTableElement;
+  // ************************ 列冻结 ************************ //
   var bodyTableRef = useRef(null);
   var scrollBodyElementRef = useRef(null);
   /**
@@ -198,173 +182,155 @@ var useTable = function useTable(_a) {
    *
    * TODO: 支持 2 种模式：从左往右冻结到指定列、只抽离并冻结指定列
    */
-
   var _useUncontrolledState2 = useUncontrolledState(defaultFixedToColumn, fixedToColumnProp, onFixedToColumn),
-      fixedToColumn = _useUncontrolledState2[0],
-      setFixedToColumn = _useUncontrolledState2[1];
-
+    fixedToColumn = _useUncontrolledState2[0],
+    setFixedToColumn = _useUncontrolledState2[1];
   var leftFreezeColumn = fixedToColumn.left;
   var rightFreezeColumn = fixedToColumn.right;
   var setLeftFreezeColumn = useCallback(function (columnKey) {
     setFixedToColumn(function (prev) {
       var next = Object.assign({}, prev);
       next.left = columnKey;
-
       if (next.right === columnKey) {
         next.right = '';
       }
-
       return next;
     });
   }, [setFixedToColumn]);
-
   var _React$useMemo = React__default.useMemo(function () {
-    if (!leftFreezeColumn && !rightFreezeColumn) {
-      return {
-        leftFrozenColKeys: [],
-        rightFrozenColKeys: [],
-        columns: mergedColumns2
-      };
-    }
-
-    var leftFrozenColKey = leftFreezeColumn;
-    var rightFrozenKey = rightFreezeColumn; // 获取左右冻结列的下标
-    // 获取左右冻结列的下标
-
-    var leftFrozenColIndex;
-    var rightFrozenColIndex;
-    mergedColumns2.some(function (column, index) {
-      if (typeof leftFrozenColKey === 'string' && leftFrozenColKey === column.dataKey) {
-        leftFrozenColIndex = index;
-      }
-
-      if (typeof rightFrozenKey === 'string' && rightFrozenKey === column.dataKey) {
-        rightFrozenColIndex = index;
+      if (!leftFreezeColumn && !rightFreezeColumn) {
+        return {
+          leftFrozenColKeys: [],
+          rightFrozenColKeys: [],
+          columns: mergedColumns2
+        };
       }
-
-      return leftFrozenColIndex !== undefined && rightFrozenColIndex !== undefined;
-    }); // 保持内部循环引用关系，如果 cloneTree，将破坏关系
-    // 保持内部循环引用关系，如果 cloneTree，将破坏关系
-
-    var nextColumns = [].concat(mergedColumns2);
-
-    if (typeof leftFrozenColIndex === 'number' || typeof rightFrozenColIndex === 'number' || scrollWidth) {
-      var lastColumns = mergedColumns2;
-      nextColumns = setColumnsDefaultWidth(nextColumns, scrollWidth ? scrollWidth / lastColumns.length : 100);
-
-      if (colWidths) {
-        // colWidths 记录的是最新的列宽，当它有值时，重置一下列宽，否则会导致冻结列动态调整宽度后定位不准
-        nextColumns = nextColumns.map(function (item, index) {
-          return Object.assign(Object.assign({}, item), {
-            width: colWidths[index]
+      var leftFrozenColKey = leftFreezeColumn;
+      var rightFrozenKey = rightFreezeColumn;
+      // 获取左右冻结列的下标
+      // 获取左右冻结列的下标
+      var leftFrozenColIndex;
+      var rightFrozenColIndex;
+      mergedColumns2.some(function (column, index) {
+        if (typeof leftFrozenColKey === 'string' && leftFrozenColKey === column.dataKey) {
+          leftFrozenColIndex = index;
+        }
+        if (typeof rightFrozenKey === 'string' && rightFrozenKey === column.dataKey) {
+          rightFrozenColIndex = index;
+        }
+        return leftFrozenColIndex !== undefined && rightFrozenColIndex !== undefined;
+      });
+      // 保持内部循环引用关系，如果 cloneTree，将破坏关系
+      // 保持内部循环引用关系，如果 cloneTree，将破坏关系
+      var nextColumns = [].concat(mergedColumns2);
+      if (typeof leftFrozenColIndex === 'number' || typeof rightFrozenColIndex === 'number' || scrollWidth) {
+        var lastColumns = mergedColumns2;
+        nextColumns = setColumnsDefaultWidth(nextColumns, scrollWidth ? scrollWidth / lastColumns.length : 100);
+        if (colWidths) {
+          // colWidths 记录的是最新的列宽，当它有值时，重置一下列宽，否则会导致冻结列动态调整宽度后定位不准
+          nextColumns = nextColumns.map(function (item, index) {
+            return Object.assign(Object.assign({}, item), {
+              width: colWidths[index]
+            });
           });
+        }
+      }
+      var leftColumns = [];
+      // 左侧
+      // 左侧
+      if (typeof leftFrozenColIndex === 'number') {
+        // TODO: 支持嵌套冻结列
+        // const targetColumn = nextColumns[leftFrozenColIndex]
+        // const beforeColumns = nextColumns.filter((_, idx) => idx < leftFrozenColIndex!)
+        // // @ts-ignore
+        // const afterColumns = fFindNestedChildNodesByIndex(nextColumns, leftFrozenColIndex)
+        // // @ts-ignore
+        // leftColumns = beforeColumns.concat(targetColumn).concat(afterColumns)
+        leftColumns = nextColumns.filter(function (item, index) {
+          return index <= leftFrozenColIndex && item.depth === 0;
+        });
+        leftColumns.forEach(function (currentItem, index) {
+          var item = parseFixedColumns(currentItem, index, nextColumns, leftColumns, 'leftStickyWidth');
+          leftColumns[index] = item;
+          nextColumns[item.index] = item;
         });
       }
-    }
-
-    var leftColumns = []; // 左侧
-    // 左侧
-
-    if (typeof leftFrozenColIndex === 'number') {
-      // TODO: 支持嵌套冻结列
-      // const targetColumn = nextColumns[leftFrozenColIndex]
-      // const beforeColumns = nextColumns.filter((_, idx) => idx < leftFrozenColIndex!)
-      // // @ts-ignore
-      // const afterColumns = fFindNestedChildNodesByIndex(nextColumns, leftFrozenColIndex)
-      // // @ts-ignore
-      // leftColumns = beforeColumns.concat(targetColumn).concat(afterColumns)
-      leftColumns = nextColumns.filter(function (item, index) {
-        return index <= leftFrozenColIndex && item.depth === 0;
-      });
-      leftColumns.forEach(function (currentItem, index) {
-        var item = parseFixedColumns(currentItem, index, nextColumns, leftColumns, 'leftStickyWidth');
-        leftColumns[index] = item;
-        nextColumns[item.index] = item;
-      });
-    } // @TODO: resizable 和 列冻结宽兼容，统一宽度设置来源
-    // const leftFixedColumnsWidth = colWidths.reduce(
-    //   (acc, width, index) => (acc += index <= leftFrozenColIndex! ? width : 0),
-    //   0
-    // )
-    // @TODO: resizable 和 列冻结宽兼容，统一宽度设置来源
-    // const leftFixedColumnsWidth = colWidths.reduce(
-    //   (acc, width, index) => (acc += index <= leftFrozenColIndex! ? width : 0),
-    //   0
-    // )
-
-
-    var getLeafNodes = function getLeafNodes(columns) {
-      return columns.reduce(function (acc, column) {
-        return acc.concat(getLeafChildren(column));
-      }, []);
-    };
-
-    var leftLeafNodes = getLeafNodes(leftColumns);
-    var leftColIndex = leftLeafNodes.length;
-    var leftFixedColumnsWidth = colWidths.reduce(function (acc, width, index) {
-      return acc += index < leftColIndex ? width : 0;
-    }, 0); // 右侧
-    // 右侧
-
-    var rightColumns = [];
-
-    if (typeof rightFrozenColIndex === 'number') {
-      var targetColumn = nextColumns[rightFrozenColIndex]; // const beforeColumns = getNodeAncestors(targetColumn)
-      // const afterColumns = nextColumns.filter((_, idx) => idx > rightFrozenColIndex!)
-      // // @ts-ignore
-      // rightColumns = beforeColumns.concat(targetColumn).concat(afterColumns)
-      // const beforeColumns = getNodeAncestors(targetColumn)
-      // const afterColumns = nextColumns.filter((_, idx) => idx > rightFrozenColIndex!)
-      // // @ts-ignore
-      // rightColumns = beforeColumns.concat(targetColumn).concat(afterColumns)
-
-      var root = getNodeRootParent(targetColumn);
-      rightColumns = [root].concat(nextColumns.filter(function (item, index) {
-        return index > rightFrozenColIndex && item.depth === 0;
-      })).reverse();
-      rightColumns.forEach(function (currentItem, index) {
-        var item = parseFixedColumns(currentItem, index, nextColumns, rightColumns, 'rightStickyWidth');
-        rightColumns[index] = item;
-        nextColumns[item.index] = item;
-      });
-    }
-
-    var rightLeafNodes = getLeafNodes(rightColumns);
-    var rightColIndex = rightLeafNodes.length;
-    var rightFixedColumnsWidth = [].concat(colWidths).reverse().reduce(function (acc, width, index) {
-      return acc += index < rightColIndex ? width : 0;
-    }, 0);
-    return {
-      leftFrozenColKeys: leftColumns,
-      rightFrozenColKeys: rightColumns,
-      columns: nextColumns,
-      leftFixedColumnsWidth: leftFixedColumnsWidth,
-      rightFixedColumnsWidth: rightFixedColumnsWidth
-    };
-  }, [mergedColumns2, scrollWidth, colWidths, leftFreezeColumn, rightFreezeColumn]),
-      leftFrozenColKeys = _React$useMemo.leftFrozenColKeys,
-      rightFrozenColKeys = _React$useMemo.rightFrozenColKeys,
-      mergedColumns1 = _React$useMemo.columns,
-      leftFixedColumnsWidth = _React$useMemo.leftFixedColumnsWidth,
-      rightFixedColumnsWidth = _React$useMemo.rightFixedColumnsWidth;
-
+      // @TODO: resizable 和 列冻结宽兼容，统一宽度设置来源
+      // const leftFixedColumnsWidth = colWidths.reduce(
+      //   (acc, width, index) => (acc += index <= leftFrozenColIndex! ? width : 0),
+      //   0
+      // )
+      // @TODO: resizable 和 列冻结宽兼容，统一宽度设置来源
+      // const leftFixedColumnsWidth = colWidths.reduce(
+      //   (acc, width, index) => (acc += index <= leftFrozenColIndex! ? width : 0),
+      //   0
+      // )
+      var getLeafNodes = function getLeafNodes(columns) {
+        return columns.reduce(function (acc, column) {
+          return acc.concat(getLeafChildren(column));
+        }, []);
+      };
+      var leftLeafNodes = getLeafNodes(leftColumns);
+      var leftColIndex = leftLeafNodes.length;
+      var leftFixedColumnsWidth = colWidths.reduce(function (acc, width, index) {
+        return acc += index < leftColIndex ? width : 0;
+      }, 0);
+      // 右侧
+      // 右侧
+      var rightColumns = [];
+      if (typeof rightFrozenColIndex === 'number') {
+        var targetColumn = nextColumns[rightFrozenColIndex];
+        // const beforeColumns = getNodeAncestors(targetColumn)
+        // const afterColumns = nextColumns.filter((_, idx) => idx > rightFrozenColIndex!)
+        // // @ts-ignore
+        // rightColumns = beforeColumns.concat(targetColumn).concat(afterColumns)
+        // const beforeColumns = getNodeAncestors(targetColumn)
+        // const afterColumns = nextColumns.filter((_, idx) => idx > rightFrozenColIndex!)
+        // // @ts-ignore
+        // rightColumns = beforeColumns.concat(targetColumn).concat(afterColumns)
+        var root = getNodeRootParent(targetColumn);
+        rightColumns = [root].concat(nextColumns.filter(function (item, index) {
+          return index > rightFrozenColIndex && item.depth === 0;
+        })).reverse();
+        rightColumns.forEach(function (currentItem, index) {
+          var item = parseFixedColumns(currentItem, index, nextColumns, rightColumns, 'rightStickyWidth');
+          rightColumns[index] = item;
+          nextColumns[item.index] = item;
+        });
+      }
+      var rightLeafNodes = getLeafNodes(rightColumns);
+      var rightColIndex = rightLeafNodes.length;
+      var rightFixedColumnsWidth = [].concat(colWidths).reverse().reduce(function (acc, width, index) {
+        return acc += index < rightColIndex ? width : 0;
+      }, 0);
+      return {
+        leftFrozenColKeys: leftColumns,
+        rightFrozenColKeys: rightColumns,
+        columns: nextColumns,
+        leftFixedColumnsWidth: leftFixedColumnsWidth,
+        rightFixedColumnsWidth: rightFixedColumnsWidth
+      };
+    }, [mergedColumns2, scrollWidth, colWidths, leftFreezeColumn, rightFreezeColumn]),
+    leftFrozenColKeys = _React$useMemo.leftFrozenColKeys,
+    rightFrozenColKeys = _React$useMemo.rightFrozenColKeys,
+    mergedColumns1 = _React$useMemo.columns,
+    leftFixedColumnsWidth = _React$useMemo.leftFixedColumnsWidth,
+    rightFixedColumnsWidth = _React$useMemo.rightFixedColumnsWidth;
   var _useState2 = useState({
-    scrollLeft: 0,
-    scrollRight: 1
-  }),
-      scrollSize = _useState2[0],
-      setScrollSize = _useState2[1];
-
+      scrollLeft: 0,
+      scrollRight: 1
+    }),
+    scrollSize = _useState2[0],
+    setScrollSize = _useState2[1];
   useEffect(function () {
     var _a, _b, _c, _d, _e, _f;
-
     if (leftFrozenColKeys.length > 0 || rightFrozenColKeys.length > 0) {
       // 计算冻结列的宽度
       // mutationObserver
       var tableWidth = (_c = (_b = (_a = bodyTableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).width) !== null && _c !== void 0 ? _c : 0;
       var tableBodyWidth = (_f = (_e = (_d = scrollBodyElementRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d).width) !== null && _f !== void 0 ? _f : 0;
-      var scrollRight = tableWidth - tableBodyWidth; // const scrollLeft = 0
-
+      var scrollRight = tableWidth - tableBodyWidth;
+      // const scrollLeft = 0
       setScrollSize(function (prev) {
         return {
           scrollLeft: prev.scrollLeft,
@@ -372,31 +338,25 @@ var useTable = function useTable(_a) {
         };
       });
     }
-  }, [leftFrozenColKeys, rightFrozenColKeys]); // const canScroll = scrollSize.scrollRight > 0
+  }, [leftFrozenColKeys, rightFrozenColKeys]);
+  // const canScroll = scrollSize.scrollRight > 0
   // 实时计算
-
   var canScroll = bodyTableRef.current && scrollBodyElementRef.current ? scrollBodyElementRef.current.clientWidth < bodyTableRef.current.clientWidth : false;
   /**
    * 同步 双 table 左右滚动偏移
    */
-
   var syncScrollLeft = React__default.useCallback(function (scrollLeft, syncTarget) {
     var scrollRight = scrollSize.scrollRight;
-
     if (syncTarget && syncTarget.scrollLeft !== scrollLeft) {
       syncTarget.scrollLeft = scrollLeft;
     }
-
     if (bodyTableRef && bodyTableRef.current && scrollBodyElementRef && scrollBodyElementRef.current && isArrayNonEmpty(rightFrozenColKeys)) {
       var _bodyTableRef$current = bodyTableRef.current.getBoundingClientRect(),
-          tableTefRight = _bodyTableRef$current.right;
-
+        tableTefRight = _bodyTableRef$current.right;
       var _scrollBodyElementRef = scrollBodyElementRef.current.getBoundingClientRect(),
-          right = _scrollBodyElementRef.right;
-
+        right = _scrollBodyElementRef.right;
       scrollRight = tableTefRight - right;
     }
-
     setScrollSize({
       scrollLeft: scrollLeft,
       scrollRight: scrollRight
@@ -405,41 +365,37 @@ var useTable = function useTable(_a) {
   var scrollHeaderElementRef = useRef(null);
   var onTableBodyScroll = React__default.useCallback(function (evt) {
     evt.stopPropagation();
-
     if (scrollBodyElementRef.current) {
       syncScrollLeft(scrollBodyElementRef.current.scrollLeft, scrollHeaderElementRef.current);
     }
-  }, [syncScrollLeft]); // 1. 对于 sticky 的元素，触发滚轮滚动，需要模拟 onScroll 触发，比如 tableHeader 固定吸顶时
+  }, [syncScrollLeft]);
+  // 1. 对于 sticky 的元素，触发滚轮滚动，需要模拟 onScroll 触发，比如 tableHeader 固定吸顶时
   // 2. 同时不允许其出现滚动条
-
   var onTableBodyScrollMock = React__default.useCallback(function (evt) {
     if (!scrollHeaderElementRef.current) return;
     evt.stopPropagation();
     var deltaX = evt.deltaX;
     scrollHeaderElementRef.current.scrollLeft = scrollHeaderElementRef.current.scrollLeft + deltaX;
     syncScrollLeft(scrollHeaderElementRef.current.scrollLeft, scrollBodyElementRef.current);
-  }, [syncScrollLeft]); // ************************ 行高亮 ************************ //
-
+  }, [syncScrollLeft]);
+  // ************************ 行高亮 ************************ //
   /**
    * 控制行高亮，依据 data 中的 key 控制
    */
-
   var _useUncontrolledState3 = useUncontrolledState(DEFAULT_HIGHLIGHTED_ROW_KEYS, highlightedRowKeysProp),
-      highlightedRowKeys = _useUncontrolledState3[0],
-      trySetHighlightedRowKeys = _useUncontrolledState3[1];
-
+    highlightedRowKeys = _useUncontrolledState3[0],
+    trySetHighlightedRowKeys = _useUncontrolledState3[1];
   var _useCheck2 = useCheck({
-    disabled: !highlightRowOnDoubleClick,
-    checkedIds: highlightedRowKeys,
-    onCheck: trySetHighlightedRowKeys
-  }),
-      onHighlightedRowChange = _useCheck2[0],
-      isHighlightedRow = _useCheck2[1];
-
+      disabled: !highlightRowOnDoubleClick,
+      checkedIds: highlightedRowKeys,
+      onCheck: trySetHighlightedRowKeys
+    }),
+    onHighlightedRowChange = _useCheck2[0],
+    isHighlightedRow = _useCheck2[1];
   var isErrorRow = useCallback(function (key) {
     return errorRowKeys.includes(key);
-  }, [errorRowKeys]); // 末级 column
-
+  }, [errorRowKeys]);
+  // 末级 column
   var flattedColumnsWithoutChildren = React__default.useMemo(function () {
     return mergedColumns1.filter(function (col) {
       return !isArrayNonEmpty(col.children);
@@ -448,32 +404,28 @@ var useTable = function useTable(_a) {
   var groupedColumns = React__default.useMemo(function () {
     return mergedColumns1.reduce(function (acc, cur) {
       var depth = cur.depth;
-
       if (!acc[depth]) {
         acc[depth] = [];
       }
-
       acc[depth].push(cur);
       return acc;
     }, []);
   }, [mergedColumns1]);
   var getStickyColProps = useLatestCallback(function (column) {
     var rightStickyWidth = column.rightStickyWidth,
-        leftStickyWidth = column.leftStickyWidth,
-        align = column.align;
+      leftStickyWidth = column.leftStickyWidth,
+      align = column.align;
     var sticky = canScroll && (typeof rightStickyWidth !== 'undefined' || typeof leftStickyWidth !== 'undefined');
     var style = {
       textAlign: align
     };
-
     if (sticky) {
       style.position = 'sticky';
       style.right = rightStickyWidth + 'px';
-      style.left = leftStickyWidth + 'px'; // the value is same with v3
-
+      style.left = leftStickyWidth + 'px';
+      // the value is same with v3
       style.zIndex = 5;
     }
-
     return {
       style: style,
       'data-sticky': setAttrStatus(sticky)
@@ -498,29 +450,23 @@ var useTable = function useTable(_a) {
       return row.children && row.children.length || onLoadChildren && !row.isLeaf;
     }) : false;
   }, [data, onLoadChildren]);
-
   var _useState3 = useState(null),
-      activeSorterColumn = _useState3[0],
-      setActiveSorterColumn = _useState3[1];
-
+    activeSorterColumn = _useState3[0],
+    setActiveSorterColumn = _useState3[1];
   var _useState4 = useState(null),
-      activeSorterType = _useState4[0],
-      setActiveSorterType = _useState4[1]; //* *************** 根据排序列处理数据 ************** *//
-
-
+    activeSorterType = _useState4[0],
+    setActiveSorterType = _useState4[1];
+  //* *************** 根据排序列处理数据 ************** *//
   var showData = useMemo(function () {
     var _a;
-
     var _data = [].concat(transitionData);
-
     if (activeSorterColumn) {
       var sorter = (_a = columns.filter(function (d) {
         return d.dataKey === activeSorterColumn;
       })[0]) === null || _a === void 0 ? void 0 : _a.sorter;
-
       if (sorter) {
-        activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse(); // 平铺的树形结构排序
-
+        activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse();
+        // 平铺的树形结构排序
         if (_data.some(function (d) {
           return d.depth !== 0;
         })) {
@@ -528,7 +474,6 @@ var useTable = function useTable(_a) {
         }
       }
     }
-
     return _data;
   }, [activeSorterColumn, activeSorterType, transitionData, columns]);
   return Object.assign(Object.assign({
@@ -608,8 +553,8 @@ var useTable = function useTable(_a) {
     footerRender: footerRender,
     showColMenu: showColMenu,
     onLoadChildren: onLoadChildren,
-    setHeaderTableElement: setHeaderTableElement
+    setHeaderTableElement: setHeaderTableElement,
+    scrollbar: scrollbar
   });
 };
-
 export { useTable };