@hi-ui/table 4.1.1-beta.0 → 4.1.2

package/CHANGELOG.md

@@ -1,10 +1,26 @@
 # @hi-ui/table
 
-## 4.1.1-beta.0
+## 4.1.2
 
 ### Patch Changes
 
-- @hi-ui/pagination@4.0.11-beta.0
+- [#2572](https://github.com/XiaoMi/hiui/pull/2572) [`eee5e6d16`](https://github.com/XiaoMi/hiui/commit/eee5e6d1658685a6119b5aa40038c572145b3b4e) Thanks [@zyprepare](https://github.com/zyprepare)! - perf: 表格性能优化
+
+- Updated dependencies [[`937052db3`](https://github.com/XiaoMi/hiui/commit/937052db36ecfa50fef53df13d159bee0d08fa41), [`ccb1eec12`](https://github.com/XiaoMi/hiui/commit/ccb1eec122a33466536b365d443f175d1e16dc86), [`eee5e6d16`](https://github.com/XiaoMi/hiui/commit/eee5e6d1658685a6119b5aa40038c572145b3b4e)]:
+  - @hi-ui/icons@4.0.14
+  - @hi-ui/popper@4.1.0
+  - @hi-ui/tree-utils@4.1.1
+
+## 4.1.1
+
+### Patch Changes
+
+- [#2557](https://github.com/XiaoMi/hiui/pull/2557) [`ef7aae038`](https://github.com/XiaoMi/hiui/commit/ef7aae038362d3a7700611737c474c29d1ba07b4) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: maxHeight 支持表达式
+
+- [#2558](https://github.com/XiaoMi/hiui/pull/2558) [`bdd913d71`](https://github.com/XiaoMi/hiui/commit/bdd913d7173de64952437014ab9ffd1947ed506c) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 增加树形结构排序
+
+- Updated dependencies [[`bdd913d71`](https://github.com/XiaoMi/hiui/commit/bdd913d7173de64952437014ab9ffd1947ed506c)]:
+  - @hi-ui/tree-utils@4.1.0
 
 ## 4.1.0
 

package/lib/cjs/BaseTable.js

@@ -60,10 +60,6 @@ var _prefix = classname.getPrefixCls('table');
 var EMBED_DATA_KEY = "TABLE_EMBED_DATA_KEY_" + index.uuid();
 var DEFAULT_COLUMNS = [];
 var DEFAULT_DATA = [];
-/**
- * TODO: What is BaseTable
- */
-
 var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   // ********************** 内嵌式面板 *********************** //
   var _a$prefixCls = _a.prefixCls,

package/lib/cjs/TableBody.js

@@ -44,20 +44,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _role = 'table';
 
 var _prefix = classname.getPrefixCls(_role);
-/**
- * TODO: What is TableBody
- */
-
 
 var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$prefixCls = _ref.prefixCls,
       prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
       emptyContent = _ref.emptyContent;
 
+  var _a;
+
   var _useTableContext = context.useTableContext(),
       columns = _useTableContext.columns,
       leafColumns = _useTableContext.leafColumns,
-      setMeasureRowElement = _useTableContext.setMeasureRowElement,
       isExpandTreeRows = _useTableContext.isExpandTreeRows,
       transitionData = _useTableContext.transitionData,
       getColgroupProps = _useTableContext.getColgroupProps,
@@ -73,7 +70,8 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       hasSumColumn = _useTableContext.hasSumColumn,
       sumRow = _useTableContext.sumRow,
       colWidths = _useTableContext.colWidths,
-      virtual = _useTableContext.virtual;
+      virtual = _useTableContext.virtual,
+      measureRowElementRef = _useTableContext.measureRowElementRef;
 
   var cls = classname.cx(prefixCls + "-body");
   var getRequiredProps = useLatest.useLatestCallback(function (id) {
@@ -90,10 +88,8 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var _useState = React.useState(0),
       scrollLeft = _useState[0],
-      setScrollLeft = _useState[1]; // 是否使用虚拟滚动
-
+      setScrollLeft = _useState[1];
 
-  var showVirtual = virtual && typeAssertion.isArrayNonEmpty(transitionData);
   var rowWidth = React.useMemo(function () {
     var tmpWidth = 0;
     colWidths.forEach(function (width) {
@@ -108,9 +104,10 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTableBodyScroll(evt);
   }, [scrollBodyElementRef, onTableBodyScroll]);
 
-  if (showVirtual) {
+  if (virtual) {
     // TODO： avg和summay row的逻辑
-    var vMaxHeight = maxHeight || 300;
+    var realHeight = (_a = scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
+    var vMaxHeight = maxHeight ? !isNaN(Number(String(maxHeight).replace(/px/, ''))) ? Number(maxHeight) : realHeight : 300;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: scrollBodyElementRef,
       className: cls,
@@ -118,15 +115,11 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onWheel: onTableBodyScrollMock,
       style: {
         maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-        // maxHeight 小于 table 实际高度才出现纵向滚动条
-        overflowY: maxHeight !== undefined && bodyTableRef.current && bodyTableRef.current.clientHeight > maxHeight ? 'scroll' : undefined,
         // 表格宽度大于div宽度才出现横向滚动条
         overflowX: canScroll ? 'scroll' : undefined
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      ref: function ref(domElement) {
-        setMeasureRowElement(domElement);
-      },
+      ref: measureRowElementRef,
       style: {
         height: 1,
         background: 'transparent'
@@ -138,7 +131,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         background: 'transparent',
         width: rowWidth
       }
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), typeAssertion.isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         width: '100%',
         position: 'sticky',
@@ -164,7 +157,13 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           rowData: row
         }, getRequiredProps(row.id))));
       }
-    })));
+    })) : renderEmptyContent(Object.assign({
+      className: prefixCls + "-empty-content",
+      colSpan: columns.length,
+      emptyContent: emptyContent
+    }, scrollBodyElementRef.current ? {
+      scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
+    } : {})));
   } // 外层增加 div 作为滚动容器
 
 
@@ -174,8 +173,6 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onScroll: onTableBodyScroll,
     style: {
       maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-      // maxHeight 小于 table 实际高度才出现纵向滚动条
-      overflowY: maxHeight !== undefined && bodyTableRef.current && bodyTableRef.current.clientHeight > maxHeight ? 'scroll' : undefined,
       // 表格宽度大于div宽度才出现横向滚动条
       overflowX: canScroll ? 'scroll' : undefined
     }
@@ -191,11 +188,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, getColgroupProps(col, idx)));
   })), /*#__PURE__*/React__default["default"].createElement("tbody", null, typeAssertion.isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, transitionData.map(function (row, index) {
     return /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, Object.assign({
-      ref: function ref(dom) {
-        if (index === 0) {
-          setMeasureRowElement(dom);
-        }
-      },
+      ref: index === 0 ? measureRowElementRef : null,
       // key={depth + index}
       key: row.id,
       // @ts-ignore

package/lib/cjs/TableHeader.js

@@ -40,10 +40,6 @@ function _interopDefaultLegacy(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _prefix = classname.getPrefixCls('table-header');
-/**
- * TODO: What is TableHeader
- */
-
 
 var TableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$prefixCls = _ref.prefixCls,

package/lib/cjs/TableRow.js

@@ -50,10 +50,6 @@ var _role = 'table';
 var _prefix = classname.getPrefixCls(_role);
 
 var EMBED_ON_ROW_PROPS = {};
-/**
- * TODO: What is TableRow
- */
-
 var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$prefixCls = _ref.prefixCls,
       prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,

package/lib/cjs/hooks/use-col-width.js

@@ -32,18 +32,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var useColWidth = function useColWidth(_ref) {
   var columns = _ref.columns,
       virtual = _ref.virtual;
+  var measureRowElementRef = React__default["default"].useRef(null);
 
-  var _React$useState = React__default["default"].useState(null),
-      measureRowElement = _React$useState[0],
-      setMeasureRowElement = _React$useState[1];
-
-  var _React$useState2 = React__default["default"].useState(function () {
+  var _React$useState = React__default["default"].useState(function () {
     return index.getGroupItemWidth(columns);
   }),
-      colWidths = _React$useState2[0],
-      setColWidths = _React$useState2[1];
+      colWidths = _React$useState[0],
+      setColWidths = _React$useState[1];
 
   var getVirtualWidths = React.useCallback(function () {
+    var measureRowElement = measureRowElementRef.current;
+
     if (!measureRowElement) {
       return index.getGroupItemWidth(columns);
     }
@@ -70,20 +69,23 @@ var useColWidth = function useColWidth(_ref) {
         return columnItem.width || columnDefaultWidth;
       });
     }
-  }, [measureRowElement, columns]);
+  }, [columns]);
   useUpdateEffect.useUpdateEffect(function () {
     if (virtual) {
       // 虚拟滚动的计算需要根据容器来做分配，不能使用没有witdh默认设置为0的方式来做表格平均分配
       setColWidths(getVirtualWidths());
-    } else {
-      setColWidths(index.getGroupItemWidth(columns));
     }
-  }, [columns, getVirtualWidths, virtual]);
+  }, [getVirtualWidths, virtual]);
+  useUpdateEffect.useUpdateEffect(function () {
+    setColWidths(index.getGroupItemWidth(columns));
+  }, [columns]);
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
    */
 
   React__default["default"].useEffect(function () {
+    var measureRowElement = measureRowElementRef.current;
+
     if (measureRowElement) {
       var _resizeObserver = new ResizeObserver(function () {
         if (virtual) {
@@ -107,11 +109,11 @@ var useColWidth = function useColWidth(_ref) {
     }
 
     return function () {}; // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
-  }, [measureRowElement, virtual]);
+  }, [getVirtualWidths, virtual]);
 
-  var _React$useState3 = React__default["default"].useState(null),
-      headerTableElement = _React$useState3[0],
-      setHeaderTableElement = _React$useState3[1];
+  var _React$useState2 = React__default["default"].useState(null),
+      headerTableElement = _React$useState2[0],
+      setHeaderTableElement = _React$useState2[1];
   /**
    *  控制列最小可调整宽度
    */
@@ -165,8 +167,7 @@ var useColWidth = function useColWidth(_ref) {
     };
   }, [colWidths]);
   return {
-    measureRowElement: measureRowElement,
-    setMeasureRowElement: setMeasureRowElement,
+    measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,
     getColgroupProps: getColgroupProps,
     setHeaderTableElement: setHeaderTableElement,

package/lib/cjs/hooks/use-expand.js

@@ -66,7 +66,14 @@ var useExpand = function useExpand(flattedData, defaultExpandedIds, expandedIdsP
 
   var transitionDataRef = useLatest.useLatestRef(transitionData);
   var trySetTransitionData = React.useCallback(function (data, expandedIds) {
-    var nextData = flattenTreeDataWithExpand(data, expandedIds);
+    var nextData = data; // 当有 children 时，在构造新的数据，防止重复刷新组件
+
+    if (data.some(function (item) {
+      return !!item.children && item.children.length > 0;
+    })) {
+      nextData = flattenTreeDataWithExpand(data, expandedIds);
+    }
+
     setTransitionData(nextData);
   }, []); // 用来确保一次折叠动画是一次加锁的单元任务
   // 防止用户频繁折叠展开导致动画渲染（存在 DOM 操作）异常

package/lib/cjs/styles/index.scss.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, '__esModule', {
 });
 var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table--virtual {width: 100%;overflow: hidden; }.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6; }.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }";
 
-var __styleInject__ = require('inject-head-style')["default"];
+var __styleInject__ = require('style-inject')["default"];
 
 __styleInject__(css_248z);
 

package/lib/cjs/use-table.js

@@ -215,7 +215,7 @@ var useTable = function useTable(_a) {
     resizable: resizable,
     virtual: virtual
   }),
-      setMeasureRowElement = _useColWidth.setMeasureRowElement,
+      measureRowElementRef = _useColWidth.measureRowElementRef,
       getColgroupProps = _useColWidth.getColgroupProps,
       onColumnResizable = _useColWidth.onColumnResizable,
       colWidths = _useColWidth.colWidths; // ************************ 列冻结 ************************ //
@@ -378,20 +378,22 @@ var useTable = function useTable(_a) {
       setScrollSize = _useState2[1];
 
   React.useEffect(function () {
-    var _a, _b, _c, _d, _e, _f; // 计算冻结列的宽度
-    // 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
-
-    setScrollSize(function (prev) {
-      return {
-        scrollLeft: prev.scrollLeft,
-        scrollRight: scrollRight
-      };
-    });
+    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
+
+      setScrollSize(function (prev) {
+        return {
+          scrollLeft: prev.scrollLeft,
+          scrollRight: scrollRight
+        };
+      });
+    }
   }, [leftFrozenColKeys, rightFrozenColKeys]); // const canScroll = scrollSize.scrollRight > 0
   // 实时计算
 
@@ -527,23 +529,30 @@ var useTable = function useTable(_a) {
 
 
   var showData = React.useMemo(function () {
-    var _data = transitionData.concat();
+    var _a;
+
+    var _data = [].concat(transitionData);
 
     if (activeSorterColumn) {
-      var sorter = columns.filter(function (d) {
+      var sorter = (_a = columns.filter(function (d) {
         return d.dataKey === activeSorterColumn;
-      })[0] && columns.filter(function (d) {
-        return d.dataKey === activeSorterColumn;
-      })[0].sorter;
+      })[0]) === null || _a === void 0 ? void 0 : _a.sorter;
 
       if (sorter) {
-        _data = activeSorterType === 'ascend' ? [].concat(_data).sort(sorter) : [].concat(_data).sort(sorter).reverse();
+        activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse(); // 平铺的树形结构排序
+
+        if (_data.some(function (d) {
+          return d.depth !== 0;
+        })) {
+          _data = treeUtils.flattedTreeSort(_data);
+        }
       }
     }
 
     return _data;
   }, [activeSorterColumn, activeSorterType, transitionData, columns]);
   return Object.assign(Object.assign({
+    measureRowElementRef: measureRowElementRef,
     rootProps: rootProps,
     scrollWidth: scrollWidth,
     activeSorterColumn: activeSorterColumn,
@@ -565,7 +574,6 @@ var useTable = function useTable(_a) {
     // 行多选
     rowSelection: rowSelection,
     cacheData: cacheData,
-    setMeasureRowElement: setMeasureRowElement,
     leafColumns: leafColumns,
     // ui
     // 有表头分组那么也要 bordered

package/lib/esm/BaseTable.js

@@ -29,10 +29,6 @@ var _prefix = getPrefixCls('table');
 var EMBED_DATA_KEY = "TABLE_EMBED_DATA_KEY_" + uuid();
 var DEFAULT_COLUMNS = [];
 var DEFAULT_DATA = [];
-/**
- * TODO: What is BaseTable
- */
-
 var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   // ********************** 内嵌式面板 *********************** //
   var _a$prefixCls = _a.prefixCls,

package/lib/esm/TableBody.js

@@ -19,20 +19,17 @@ import { useTableContext } from './context.js';
 var _role = 'table';
 
 var _prefix = getPrefixCls(_role);
-/**
- * TODO: What is TableBody
- */
-
 
 var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$prefixCls = _ref.prefixCls,
       prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
       emptyContent = _ref.emptyContent;
 
+  var _a;
+
   var _useTableContext = useTableContext(),
       columns = _useTableContext.columns,
       leafColumns = _useTableContext.leafColumns,
-      setMeasureRowElement = _useTableContext.setMeasureRowElement,
       isExpandTreeRows = _useTableContext.isExpandTreeRows,
       transitionData = _useTableContext.transitionData,
       getColgroupProps = _useTableContext.getColgroupProps,
@@ -48,7 +45,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       hasSumColumn = _useTableContext.hasSumColumn,
       sumRow = _useTableContext.sumRow,
       colWidths = _useTableContext.colWidths,
-      virtual = _useTableContext.virtual;
+      virtual = _useTableContext.virtual,
+      measureRowElementRef = _useTableContext.measureRowElementRef;
 
   var cls = cx(prefixCls + "-body");
   var getRequiredProps = useLatestCallback(function (id) {
@@ -65,10 +63,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var _useState = useState(0),
       scrollLeft = _useState[0],
-      setScrollLeft = _useState[1]; // 是否使用虚拟滚动
-
+      setScrollLeft = _useState[1];
 
-  var showVirtual = virtual && isArrayNonEmpty(transitionData);
   var rowWidth = useMemo(function () {
     var tmpWidth = 0;
     colWidths.forEach(function (width) {
@@ -83,9 +79,10 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onTableBodyScroll(evt);
   }, [scrollBodyElementRef, onTableBodyScroll]);
 
-  if (showVirtual) {
+  if (virtual) {
     // TODO： avg和summay row的逻辑
-    var vMaxHeight = maxHeight || 300;
+    var realHeight = (_a = scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
+    var vMaxHeight = maxHeight ? !isNaN(Number(String(maxHeight).replace(/px/, ''))) ? Number(maxHeight) : realHeight : 300;
     return /*#__PURE__*/React__default.createElement("div", {
       ref: scrollBodyElementRef,
       className: cls,
@@ -93,15 +90,11 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onWheel: onTableBodyScrollMock,
       style: {
         maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-        // maxHeight 小于 table 实际高度才出现纵向滚动条
-        overflowY: maxHeight !== undefined && bodyTableRef.current && bodyTableRef.current.clientHeight > maxHeight ? 'scroll' : undefined,
         // 表格宽度大于div宽度才出现横向滚动条
         overflowX: canScroll ? 'scroll' : undefined
       }
     }, /*#__PURE__*/React__default.createElement("div", {
-      ref: function ref(domElement) {
-        setMeasureRowElement(domElement);
-      },
+      ref: measureRowElementRef,
       style: {
         height: 1,
         background: 'transparent'
@@ -113,7 +106,7 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         background: 'transparent',
         width: rowWidth
       }
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement("div", {
       style: {
         width: '100%',
         position: 'sticky',
@@ -139,7 +132,13 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
           rowData: row
         }, getRequiredProps(row.id))));
       }
-    })));
+    })) : renderEmptyContent(Object.assign({
+      className: prefixCls + "-empty-content",
+      colSpan: columns.length,
+      emptyContent: emptyContent
+    }, scrollBodyElementRef.current ? {
+      scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
+    } : {})));
   } // 外层增加 div 作为滚动容器
 
 
@@ -149,8 +148,6 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onScroll: onTableBodyScroll,
     style: {
       maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-      // maxHeight 小于 table 实际高度才出现纵向滚动条
-      overflowY: maxHeight !== undefined && bodyTableRef.current && bodyTableRef.current.clientHeight > maxHeight ? 'scroll' : undefined,
       // 表格宽度大于div宽度才出现横向滚动条
       overflowX: canScroll ? 'scroll' : undefined
     }
@@ -166,11 +163,7 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, getColgroupProps(col, idx)));
   })), /*#__PURE__*/React__default.createElement("tbody", null, isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
     return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
-      ref: function ref(dom) {
-        if (index === 0) {
-          setMeasureRowElement(dom);
-        }
-      },
+      ref: index === 0 ? measureRowElementRef : null,
       // key={depth + index}
       key: row.id,
       // @ts-ignore

package/lib/esm/TableHeader.js

@@ -17,10 +17,6 @@ import { renderFilter } from './TableAdvancedFilter.js';
 import { useCheckState } from '@hi-ui/use-check-state';
 
 var _prefix = getPrefixCls('table-header');
-/**
- * TODO: What is TableHeader
- */
-
 
 var TableHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$prefixCls = _ref.prefixCls,

package/lib/esm/TableRow.js

@@ -23,10 +23,6 @@ var _role = 'table';
 var _prefix = getPrefixCls(_role);
 
 var EMBED_ON_ROW_PROPS = {};
-/**
- * TODO: What is TableRow
- */
-
 var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$prefixCls = _ref.prefixCls,
       prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,

package/lib/esm/hooks/use-col-width.js

@@ -14,18 +14,17 @@ import { useUpdateEffect } from '@hi-ui/use-update-effect';
 var useColWidth = function useColWidth(_ref) {
   var columns = _ref.columns,
       virtual = _ref.virtual;
+  var measureRowElementRef = React__default.useRef(null);
 
-  var _React$useState = React__default.useState(null),
-      measureRowElement = _React$useState[0],
-      setMeasureRowElement = _React$useState[1];
-
-  var _React$useState2 = React__default.useState(function () {
+  var _React$useState = React__default.useState(function () {
     return getGroupItemWidth(columns);
   }),
-      colWidths = _React$useState2[0],
-      setColWidths = _React$useState2[1];
+      colWidths = _React$useState[0],
+      setColWidths = _React$useState[1];
 
   var getVirtualWidths = useCallback(function () {
+    var measureRowElement = measureRowElementRef.current;
+
     if (!measureRowElement) {
       return getGroupItemWidth(columns);
     }
@@ -52,20 +51,23 @@ var useColWidth = function useColWidth(_ref) {
         return columnItem.width || columnDefaultWidth;
       });
     }
-  }, [measureRowElement, columns]);
+  }, [columns]);
   useUpdateEffect(function () {
     if (virtual) {
       // 虚拟滚动的计算需要根据容器来做分配，不能使用没有witdh默认设置为0的方式来做表格平均分配
       setColWidths(getVirtualWidths());
-    } else {
-      setColWidths(getGroupItemWidth(columns));
     }
-  }, [columns, getVirtualWidths, virtual]);
+  }, [getVirtualWidths, virtual]);
+  useUpdateEffect(function () {
+    setColWidths(getGroupItemWidth(columns));
+  }, [columns]);
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
    */
 
   React__default.useEffect(function () {
+    var measureRowElement = measureRowElementRef.current;
+
     if (measureRowElement) {
       var _resizeObserver = new ResizeObserver(function () {
         if (virtual) {
@@ -89,11 +91,11 @@ var useColWidth = function useColWidth(_ref) {
     }
 
     return function () {}; // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
-  }, [measureRowElement, virtual]);
+  }, [getVirtualWidths, virtual]);
 
-  var _React$useState3 = React__default.useState(null),
-      headerTableElement = _React$useState3[0],
-      setHeaderTableElement = _React$useState3[1];
+  var _React$useState2 = React__default.useState(null),
+      headerTableElement = _React$useState2[0],
+      setHeaderTableElement = _React$useState2[1];
   /**
    *  控制列最小可调整宽度
    */
@@ -147,8 +149,7 @@ var useColWidth = function useColWidth(_ref) {
     };
   }, [colWidths]);
   return {
-    measureRowElement: measureRowElement,
-    setMeasureRowElement: setMeasureRowElement,
+    measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,
     getColgroupProps: getColgroupProps,
     setHeaderTableElement: setHeaderTableElement,

package/lib/esm/hooks/use-expand.js

@@ -56,7 +56,14 @@ var useExpand = function useExpand(flattedData, defaultExpandedIds, expandedIdsP
 
   var transitionDataRef = useLatestRef(transitionData);
   var trySetTransitionData = useCallback(function (data, expandedIds) {
-    var nextData = flattenTreeDataWithExpand(data, expandedIds);
+    var nextData = data; // 当有 children 时，在构造新的数据，防止重复刷新组件
+
+    if (data.some(function (item) {
+      return !!item.children && item.children.length > 0;
+    })) {
+      nextData = flattenTreeDataWithExpand(data, expandedIds);
+    }
+
     setTransitionData(nextData);
   }, []); // 用来确保一次折叠动画是一次加锁的单元任务
   // 防止用户频繁折叠展开导致动画渲染（存在 DOM 操作）异常

package/lib/esm/styles/index.scss.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import __styleInject__ from 'inject-head-style';
+import __styleInject__ from 'style-inject';
 var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table--virtual {width: 100%;overflow: hidden; }.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6; }.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }";
 
 __styleInject__(css_248z);

package/lib/esm/use-table.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import { cloneTree, flattenTree, getLeafChildren, getNodeRootParent } from '@hi-ui/tree-utils';
+import { cloneTree, flattenTree, getLeafChildren, getNodeRootParent, flattedTreeSort } from '@hi-ui/tree-utils';
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { useColWidth } from './hooks/use-col-width.js';
@@ -183,7 +183,7 @@ var useTable = function useTable(_a) {
     resizable: resizable,
     virtual: virtual
   }),
-      setMeasureRowElement = _useColWidth.setMeasureRowElement,
+      measureRowElementRef = _useColWidth.measureRowElementRef,
       getColgroupProps = _useColWidth.getColgroupProps,
       onColumnResizable = _useColWidth.onColumnResizable,
       colWidths = _useColWidth.colWidths; // ************************ 列冻结 ************************ //
@@ -346,20 +346,22 @@ var useTable = function useTable(_a) {
       setScrollSize = _useState2[1];
 
   useEffect(function () {
-    var _a, _b, _c, _d, _e, _f; // 计算冻结列的宽度
-    // 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
-
-    setScrollSize(function (prev) {
-      return {
-        scrollLeft: prev.scrollLeft,
-        scrollRight: scrollRight
-      };
-    });
+    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
+
+      setScrollSize(function (prev) {
+        return {
+          scrollLeft: prev.scrollLeft,
+          scrollRight: scrollRight
+        };
+      });
+    }
   }, [leftFrozenColKeys, rightFrozenColKeys]); // const canScroll = scrollSize.scrollRight > 0
   // 实时计算
 
@@ -495,23 +497,30 @@ var useTable = function useTable(_a) {
 
 
   var showData = useMemo(function () {
-    var _data = transitionData.concat();
+    var _a;
+
+    var _data = [].concat(transitionData);
 
     if (activeSorterColumn) {
-      var sorter = columns.filter(function (d) {
+      var sorter = (_a = columns.filter(function (d) {
         return d.dataKey === activeSorterColumn;
-      })[0] && columns.filter(function (d) {
-        return d.dataKey === activeSorterColumn;
-      })[0].sorter;
+      })[0]) === null || _a === void 0 ? void 0 : _a.sorter;
 
       if (sorter) {
-        _data = activeSorterType === 'ascend' ? [].concat(_data).sort(sorter) : [].concat(_data).sort(sorter).reverse();
+        activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse(); // 平铺的树形结构排序
+
+        if (_data.some(function (d) {
+          return d.depth !== 0;
+        })) {
+          _data = flattedTreeSort(_data);
+        }
       }
     }
 
     return _data;
   }, [activeSorterColumn, activeSorterType, transitionData, columns]);
   return Object.assign(Object.assign({
+    measureRowElementRef: measureRowElementRef,
     rootProps: rootProps,
     scrollWidth: scrollWidth,
     activeSorterColumn: activeSorterColumn,
@@ -533,7 +542,6 @@ var useTable = function useTable(_a) {
     // 行多选
     rowSelection: rowSelection,
     cacheData: cacheData,
-    setMeasureRowElement: setMeasureRowElement,
     leafColumns: leafColumns,
     // ui
     // 有表头分组那么也要 bordered

package/lib/types/BaseTable.d.ts

@@ -4,9 +4,6 @@ import { TableExtra, TableColumnItem, TableOnRowReturn } from './types';
 import { UseTableProps } from './use-table';
 import { UseEmbedExpandProps } from './hooks/use-embed-expand';
 export declare const EMBED_DATA_KEY: string;
-/**
- * TODO: What is BaseTable
- */
 export declare const BaseTable: React.ForwardRefExoticComponent<BaseTableProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface BaseTableProps extends Omit<HiBaseHTMLProps<'div'>, 'onDrop' | 'draggable' | 'onDragStart'>, UseTableProps, UseEmbedExpandProps {
     /**

package/lib/types/TableBody.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-/**
- * TODO: What is TableBody
- */
 export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface TableBodyProps {
     /**

package/lib/types/TableHeader.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-/**
- * TODO: What is TableHeader
- */
 export declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface TableHeaderProps {
     /**

package/lib/types/TableRow.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
 import { FlattedTableRowData } from './types';
-/**
- * TODO: What is TableRow
- */
 export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement | null>>;
 export interface TableRowProps {
     /**

package/lib/types/context.d.ts

@@ -41,6 +41,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
     scrollLeft: number;
     scrollRight: number;
+    measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
     rootProps: {
         bordered?: boolean | undefined;
         pagination?: import("packages/ui/pagination/lib/types").PaginationProps | undefined;
@@ -54,7 +55,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     activeSorterType: string | null;
     setActiveSorterType: import("react").Dispatch<import("react").SetStateAction<string | null>>;
     canScroll: boolean;
-    maxHeight: number | undefined;
+    maxHeight: string | number | undefined;
     getTableHeaderProps: () => {
         style: import("react").CSSProperties;
         'data-sticky': "" | undefined;
@@ -69,7 +70,6 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     flattedColumnsWithoutChildren: import("./types").FlattedTableColumnItemData[];
     rowSelection: import("./types").TableRowSelection | undefined;
     cacheData: object[];
-    setMeasureRowElement: import("react").Dispatch<import("react").SetStateAction<Element | null>>;
     leafColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     bordered: boolean;
     scrollHeaderElementRef: import("react").RefObject<HTMLTableElement>;
@@ -146,6 +146,7 @@ export declare const useTableContext: () => Omit<{
     onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
     scrollLeft: number;
     scrollRight: number;
+    measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
     rootProps: {
         bordered?: boolean | undefined;
         pagination?: import("packages/ui/pagination/lib/types").PaginationProps | undefined;
@@ -159,7 +160,7 @@ export declare const useTableContext: () => Omit<{
     activeSorterType: string | null;
     setActiveSorterType: import("react").Dispatch<import("react").SetStateAction<string | null>>;
     canScroll: boolean;
-    maxHeight: number | undefined;
+    maxHeight: string | number | undefined;
     getTableHeaderProps: () => {
         style: import("react").CSSProperties;
         'data-sticky': "" | undefined;
@@ -174,7 +175,6 @@ export declare const useTableContext: () => Omit<{
     flattedColumnsWithoutChildren: import("./types").FlattedTableColumnItemData[];
     rowSelection: import("./types").TableRowSelection | undefined;
     cacheData: object[];
-    setMeasureRowElement: import("react").Dispatch<import("react").SetStateAction<Element | null>>;
     leafColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     bordered: boolean;
     scrollHeaderElementRef: import("react").RefObject<HTMLTableElement>;

package/lib/types/hooks/use-col-width.d.ts

@@ -6,8 +6,7 @@ export declare const useColWidth: ({ resizable, data, columns, virtual, }: {
     columns: TableColumnItem[];
     virtual?: boolean | undefined;
 }) => {
-    measureRowElement: Element | null;
-    setMeasureRowElement: React.Dispatch<React.SetStateAction<Element | null>>;
+    measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
     onColumnResizable: (_: any, { size }: any, index: number) => void;
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {

package/lib/types/types.d.ts

@@ -198,12 +198,15 @@ export interface FlattedTableRowData extends TableRowData {
     /**
      * 该节点的父节点
      */
-    parent?: FlattedTableRowData;
+    parent?: FlattedTableRowDataWithChildren;
     /**
      * 节点所在列表数据中的下标
      */
     pos?: number;
 }
+export interface FlattedTableRowDataWithChildren extends FlattedTableRowData {
+    children: FlattedTableRowData[];
+}
 export interface FlattedTableColumnItemData extends TableColumnItem {
     /**
      * 树节点唯一 id

package/lib/types/use-table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableColumnItem, TableFrozenColumnOptions, TableRowEventData, TableRowSelection, FlattedTableColumnItemData } from './types';
+import { TableColumnItem, TableFrozenColumnOptions, TableRowEventData, TableRowSelection, FlattedTableColumnItemData, FlattedTableRowData } from './types';
 import { PaginationProps } from '@hi-ui/pagination';
 export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, fieldKey, virtual, ...rootProps }: UseTableProps) => {
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
@@ -42,6 +42,7 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     onLoadChildren: ((item: TableRowEventData) => Promise<any[] | void> | void) | undefined;
     scrollLeft: number;
     scrollRight: number;
+    measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
     rootProps: {
         /**
          *  是否显示边框（表头分组模式下，表格自带边框）
@@ -70,7 +71,7 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     activeSorterType: string | null;
     setActiveSorterType: React.Dispatch<React.SetStateAction<string | null>>;
     canScroll: boolean;
-    maxHeight: number | undefined;
+    maxHeight: string | number | undefined;
     getTableHeaderProps: () => {
         style: React.CSSProperties;
         'data-sticky': "" | undefined;
@@ -80,12 +81,11 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     scrollBodyElementRef: React.RefObject<HTMLTableElement>;
     columns: FlattedTableColumnItemData[];
     data: object[];
-    transitionData: import("./types").FlattedTableRowData[];
+    transitionData: FlattedTableRowData[];
     flattedColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     flattedColumnsWithoutChildren: FlattedTableColumnItemData[];
     rowSelection: TableRowSelection | undefined;
     cacheData: object[];
-    setMeasureRowElement: React.Dispatch<React.SetStateAction<Element | null>>;
     leafColumns: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
     bordered: boolean;
     scrollHeaderElementRef: React.RefObject<HTMLTableElement>;
@@ -147,7 +147,7 @@ export interface UseTableProps {
     /**
      *  表格最大高度，当穿过该高度时，展示滚动条且表头固定
      */
-    maxHeight?: number;
+    maxHeight?: number | string;
     /**
      *  表格列冻结默认设置，为 string 时仅支持从左侧冻结至某一列
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "4.1.1-beta.0",
+  "version": "4.1.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -53,16 +53,16 @@
     "@hi-ui/env": "^4.0.1",
     "@hi-ui/func-utils": "^4.0.1",
     "@hi-ui/icon-button": "^4.0.4",
-    "@hi-ui/icons": "^4.0.4",
+    "@hi-ui/icons": "^4.0.14",
     "@hi-ui/loading": "^4.1.0",
     "@hi-ui/object-utils": "^4.0.1",
-    "@hi-ui/pagination": "^4.0.11-beta.0",
-    "@hi-ui/popper": "^4.0.4",
+    "@hi-ui/pagination": "^4.0.8",
+    "@hi-ui/popper": "^4.1.0",
     "@hi-ui/react-utils": "^4.0.1",
     "@hi-ui/select": "^4.0.8",
     "@hi-ui/spinner": "^4.0.4",
     "@hi-ui/times": "^4.0.1",
-    "@hi-ui/tree-utils": "^4.0.2",
+    "@hi-ui/tree-utils": "^4.1.1",
     "@hi-ui/type-assertion": "^4.0.1",
     "@hi-ui/use-cache": "^4.0.1",
     "@hi-ui/use-check": "^4.0.2",
@@ -83,7 +83,6 @@
   "devDependencies": {
     "@hi-ui/core": "^4.0.4",
     "@hi-ui/core-css": "^4.0.1",
-    "@hi-ui/hi-build": "^4.0.1",
     "@types/react-resizable": "^1.7.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"