@hi-ui/table 4.2.0 → 4.3.0

package/lib/esm/BaseTable.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useMemo } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLocaleContext } from '@hi-ui/core';
@@ -22,6 +22,9 @@ import { TableProvider } from './context.js';
 import { uuid, checkNeedTotalOrEvg, getTotalOrEvgRowData } from './utils/index.js';
 import { useTable } from './use-table.js';
 import { useEmbedExpand } from './hooks/use-embed-expand.js';
+import { TheadContent } from './TheadContent.js';
+import { ColGroupContent } from './ColGroupContent.js';
+import { TbodyContent } from './TbodyContent.js';
 var _role = 'table';
 
 var _prefix = getPrefixCls('table');
@@ -30,7 +33,6 @@ var EMBED_DATA_KEY = "TABLE_EMBED_DATA_KEY_" + uuid();
 var DEFAULT_COLUMNS = [];
 var DEFAULT_DATA = [];
 var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
-  // ********************** 内嵌式面板 *********************** //
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$role = _a.role,
@@ -59,7 +61,9 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       fixedColumnTrigger = _a$fixedColumnTrigger === void 0 ? 'auto' : _a$fixedColumnTrigger,
       emptyContent = _a.emptyContent,
       virtual = _a.virtual,
-      rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual"]);
+      needDoubleTable = _a.needDoubleTable,
+      rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable"]); // ********************** 内嵌式面板 *********************** //
+
 
   var _useEmbedExpand = useEmbedExpand({
     defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -115,48 +119,70 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
 
     return columns;
   }, [embedExpandable, getEmbedPanelColumn, columns]);
-  var i18n = useLocaleContext(); // 确保包含 avg 属性，且值为数字类型的字符串
+  var i18n = useLocaleContext();
 
-  var avgRow = {
-    id: 'avg',
-    raw: {
-      key: 'avg'
-    }
-  };
-  var hasAvgColumn = false;
-  columns.forEach(function (column, index) {
-    if (index === 0) {
-      // @ts-ignore
-      avgRow.raw[column.dataKey] = i18n.get('table.average');
-    }
+  var _useMemo = useMemo(function () {
+    // 确保包含 avg 属性，且值为数字类型的字符串
+    var avgRow = {
+      id: 'avg',
+      raw: {
+        key: 'avg'
+      }
+    };
+    var hasAvgColumn = false;
+    columns.forEach(function (column, index) {
+      if (index === 0) {
+        // @ts-ignore
+        avgRow.raw[column.dataKey] = i18n.get('table.average');
+      }
 
-    if (checkNeedTotalOrEvg(data, column, 'avg')) {
-      hasAvgColumn = true; // @ts-ignore
+      if (checkNeedTotalOrEvg(data, column, 'avg')) {
+        hasAvgColumn = true; // @ts-ignore
+        // @ts-ignore
 
-      avgRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, true);
-    }
-  }); // 确保包含total属性，且值为数字类型的字符串
+        avgRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, true);
+      }
+    });
+    return {
+      avgRow: avgRow,
+      hasAvgColumn: hasAvgColumn
+    };
+  }, [columns, data, i18n]),
+      avgRow = _useMemo.avgRow,
+      hasAvgColumn = _useMemo.hasAvgColumn;
 
-  var sumRow = {
-    id: 'sum',
-    raw: {
-      key: 'sum'
-    }
-  };
-  var hasSumColumn = false;
-  columns.forEach(function (column, index) {
-    if (index === 0) {
-      // @ts-ignore
-      sumRow.raw[column.dataKey] = i18n.get('table.total');
-    }
+  var _useMemo2 = useMemo(function () {
+    // 确保包含total属性，且值为数字类型的字符串
+    var sumRow = {
+      id: 'sum',
+      raw: {
+        key: 'sum'
+      }
+    };
+    var hasSumColumn = false;
+    columns.forEach(function (column, index) {
+      if (index === 0) {
+        // @ts-ignore
+        sumRow.raw[column.dataKey] = i18n.get('table.total');
+      }
 
-    if (checkNeedTotalOrEvg(data, column, 'total')) {
-      hasSumColumn = true; // 获取当前数据最大小数点个数，并设置最后总和值小数点
-      // @ts-ignore
+      if (checkNeedTotalOrEvg(data, column, 'total')) {
+        hasSumColumn = true; // 获取当前数据最大小数点个数，并设置最后总和值小数点
+        // @ts-ignore
+        // 获取当前数据最大小数点个数，并设置最后总和值小数点
+        // @ts-ignore
+
+        sumRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, false);
+      }
+    });
+    return {
+      sumRow: sumRow,
+      hasSumColumn: hasSumColumn
+    };
+  }, [columns, data, i18n]),
+      sumRow = _useMemo2.sumRow,
+      hasSumColumn = _useMemo2.hasSumColumn;
 
-      sumRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, false);
-    }
-  });
   var providedValue = useTable(Object.assign(Object.assign({}, rest), {
     columns: mergedColumns,
     data: data,
@@ -169,11 +195,68 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       leftFixedColumnsWidth = providedValue.leftFixedColumnsWidth,
       rightFixedColumnsWidth = providedValue.rightFixedColumnsWidth,
       scrollSize = providedValue.scrollSize,
-      getTableHeaderProps = providedValue.getTableHeaderProps;
+      getTableHeaderProps = providedValue.getTableHeaderProps,
+      scrollBodyElementRef = providedValue.scrollBodyElementRef,
+      onTableBodyScroll = providedValue.onTableBodyScroll,
+      canScroll = providedValue.canScroll,
+      bodyTableRef = providedValue.bodyTableRef,
+      scrollWidth = providedValue.scrollWidth,
+      footerRender = providedValue.footerRender;
   var hasBorder = borderedProp !== null && borderedProp !== void 0 ? borderedProp : bordered;
   var extraHeader = extra && extra.header;
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
+
+  var renderTable = function renderTable() {
+    return needDoubleTable ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default.createElement(TableHeader, null), extraHeader ? /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        right: 0,
+        zIndex: 11,
+        bottom: 0,
+        top: 0
+      }
+    }, extraHeader) : null), /*#__PURE__*/React__default.createElement(TableBody, {
+      emptyContent: emptyContent
+    })) : /*#__PURE__*/React__default.createElement("div", {
+      ref: scrollBodyElementRef,
+      className: prefixCls + "-content",
+      onScroll: onTableBodyScroll,
+      style: {
+        // 表格宽度大于div宽度才出现横向滚动条
+        overflowX: canScroll ? 'scroll' : undefined
+      }
+    }, /*#__PURE__*/React__default.createElement("table", {
+      ref: bodyTableRef,
+      style: {
+        width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
+      }
+    }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, {
+      emptyContent: emptyContent
+    })));
+  };
+
+  var renderFreezeShadow = function renderFreezeShadow() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+      className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
+      style: {
+        width: leftFixedColumnsWidth + 'px'
+      }
+    }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+      className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
+      style: {
+        width: rightFixedColumnsWidth + 'px'
+      }
+    }) : null);
+  };
+
+  var tableFooter = /*#__PURE__*/React__default.createElement("div", {
+    className: prefixCls + "-footer",
+    style: stickyFooter ? {
+      position: 'sticky',
+      bottom: stickyFooterBottom
+    } : undefined
+  }, isFunction(footerRender) ? footerRender( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, extraFooter)) : extraFooter);
   var cls = cx(prefixCls, className, hasBorder && prefixCls + "--bordered", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size, virtual && prefixCls + "--virtual");
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: ref,
@@ -197,37 +280,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       hasSumColumn: hasSumColumn,
       virtual: virtual
     })
-  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default.createElement(TableHeader, {
-    prefixCls: prefixCls + "-header"
-  }), extraHeader ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'absolute',
-      right: 0,
-      zIndex: 11,
-      bottom: 0,
-      top: 0
-    }
-  }, extraHeader) : null), /*#__PURE__*/React__default.createElement(TableBody, {
-    prefixCls: prefixCls,
-    emptyContent: emptyContent
-  })), (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
-    style: {
-      width: leftFixedColumnsWidth + 'px'
-    }
-  }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
-    style: {
-      width: rightFixedColumnsWidth + 'px'
-    }
-  }) : null), /*#__PURE__*/React__default.createElement("div", {
-    className: prefixCls + "-footer",
-    style: stickyFooter ? {
-      position: 'sticky',
-      bottom: stickyFooterBottom // boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1)'
-
-    } : undefined
-  }, extraFooter));
+  }, renderTable()), renderFreezeShadow()), tableFooter);
 });
 
 if (__DEV__) {

package/lib/esm/ColGroupContent.js

@@ -0,0 +1,37 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React__default, { forwardRef } from 'react';
+import { getPrefixCls } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useTableContext } from './context.js';
+
+var _prefix = getPrefixCls('table-colgroup');
+
+var ColGroupContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls;
+
+  var _useTableContext = useTableContext(),
+      getColgroupProps = _useTableContext.getColgroupProps,
+      leafColumns = _useTableContext.leafColumns;
+
+  return /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
+    return /*#__PURE__*/React__default.createElement("col", Object.assign({
+      key: idx,
+      className: prefixCls + "-col"
+    }, getColgroupProps(col, idx)));
+  }));
+});
+
+if (__DEV__) {
+  ColGroupContent.displayName = 'ColGroupContent';
+}
+
+export { ColGroupContent };

package/lib/esm/Table.js

@@ -27,7 +27,13 @@ import { uuid } from './utils/index.js';
 import { useColSet } from './hooks/use-col-set.js';
 
 var _prefix = getPrefixCls('table');
+/**
+ * 需要使用双表格的场景对应的 API
+ * 这些场景下的功能无法通过单表格实现，故而设计成双表格，即表头和表体分别用一个 table 实现
+ */
+
 
+var DOUBLE_TABLE_SCENE = ['maxHeight', 'sticky', 'stickyTop', 'setting', 'virtual'];
 var STANDARD_PRESET = {
   striped: true,
   bordered: true,
@@ -46,7 +52,6 @@ var DEFAULT_PAGINATION = {
  */
 
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
-  // ************************ 预置标准模式 ************************ //
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$standard = _a.standard,
@@ -69,8 +74,13 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       extra = _a.extra,
       _a$data = _a.data,
       data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
-      virtual = _a.virtual,
-      rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data", "virtual"]);
+      rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data"]); // 是否需要双表格
+
+
+  var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
+    return !!rest[prop];
+  });
+  var virtual = rest.virtual; // ************************ 预置标准模式 ************************ //
 
   var tableProps = withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
 
@@ -282,6 +292,7 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     data: mergedData,
     fieldKey: fieldKey,
     virtual: virtual,
+    needDoubleTable: needDoubleTable,
     extra: Object.assign({
       header: setting ? /*#__PURE__*/React__default.createElement(TableSettingMenu, {
         prefixCls: prefixCls + "-setting",

package/lib/esm/TableBody.js

@@ -13,9 +13,10 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLatestCallback } from '@hi-ui/use-latest';
 import { isArrayNonEmpty } from '@hi-ui/type-assertion';
-import { EmptyState } from '@hi-ui/empty-state';
 import { TableRow } from './TableRow.js';
 import { useTableContext } from './context.js';
+import { ColGroupContent } from './ColGroupContent.js';
+import { renderEmptyContent, TbodyContent } from './TbodyContent.js';
 var _role = 'table';
 
 var _prefix = getPrefixCls(_role);
@@ -29,10 +30,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var _useTableContext = useTableContext(),
       columns = _useTableContext.columns,
-      leafColumns = _useTableContext.leafColumns,
       isExpandTreeRows = _useTableContext.isExpandTreeRows,
       transitionData = _useTableContext.transitionData,
-      getColgroupProps = _useTableContext.getColgroupProps,
       bodyTableRef = _useTableContext.bodyTableRef,
       scrollBodyElementRef = _useTableContext.scrollBodyElementRef,
       onTableBodyScroll = _useTableContext.onTableBodyScroll,
@@ -40,10 +39,6 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       maxHeight = _useTableContext.maxHeight,
       canScroll = _useTableContext.canScroll,
       scrollWidth = _useTableContext.scrollWidth,
-      hasAvgColumn = _useTableContext.hasAvgColumn,
-      avgRow = _useTableContext.avgRow,
-      hasSumColumn = _useTableContext.hasSumColumn,
-      sumRow = _useTableContext.sumRow,
       colWidths = _useTableContext.colWidths,
       virtual = _useTableContext.virtual,
       measureRowElementRef = _useTableContext.measureRowElementRef;
@@ -156,65 +151,11 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
     }
-  }, /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
-    return /*#__PURE__*/React__default.createElement("col", Object.assign({
-      key: idx,
-      className: prefixCls + "-col"
-    }, 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: index === 0 ? measureRowElementRef : null,
-      // key={depth + index}
-      key: row.id,
-      // @ts-ignore
-      rowIndex: index,
-      rowData: row
-    }, getRequiredProps(row.id)));
-  }), hasSumColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
-    key: sumRow.id,
-    rowIndex: transitionData.length,
-    rowData: sumRow,
-    isSumRow: true
-  }) : null, hasAvgColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
-    key: avgRow.id,
-    rowIndex: transitionData.length + 1,
-    rowData: avgRow,
-    isAvgRow: true
-  }) : null) : // 空状态，colSpan 占满表格整行
-  renderEmptyContent(Object.assign({
-    className: prefixCls + "-empty-content",
-    colSpan: columns.length,
-    emptyContent: emptyContent
-  }, scrollBodyElementRef.current ? {
-    scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
-  } : {})))));
+  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, null)));
 });
 
 if (__DEV__) {
   TableBody.displayName = 'TableBody';
 }
-/**
- * 负责空状态渲染
- */
-
-
-var renderEmptyContent = function renderEmptyContent(_ref2) {
-  var className = _ref2.className,
-      colSpan = _ref2.colSpan,
-      emptyContent = _ref2.emptyContent,
-      scrollBodyWidth = _ref2.scrollBodyWidth;
-  return /*#__PURE__*/React__default.createElement("tr", {
-    className: className
-  }, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: colSpan
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'sticky',
-      left: 0,
-      width: scrollBodyWidth !== null && scrollBodyWidth !== void 0 ? scrollBodyWidth : '100%',
-      overflow: 'hidden'
-    }
-  }, emptyContent || /*#__PURE__*/React__default.createElement(EmptyState, null))));
-};
 
 export { TableBody };

package/lib/esm/TableHeader.js

@@ -8,13 +8,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React__default, { forwardRef } from 'react';
-import { Resizable } from 'react-resizable';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
-import { isFunction } from '@hi-ui/type-assertion';
 import { useTableContext } from './context.js';
-import { renderFilter } from './TableAdvancedFilter.js';
-import { useCheckState } from '@hi-ui/use-check-state';
+import { ColGroupContent } from './ColGroupContent.js';
+import { TheadContent } from './TheadContent.js';
 
 var _prefix = getPrefixCls('table-header');
 
@@ -24,21 +22,10 @@ var TableHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref.className;
 
   var _useTableContext = useTableContext(),
-      groupedColumns = _useTableContext.groupedColumns,
-      resizable = _useTableContext.resizable,
-      colWidths = _useTableContext.colWidths,
-      isHoveredHighlightCol = _useTableContext.isHoveredHighlightCol,
-      isHighlightedCol = _useTableContext.isHighlightedCol,
-      getColgroupProps = _useTableContext.getColgroupProps,
-      onColumnResizable = _useTableContext.onColumnResizable,
-      getStickyColProps = _useTableContext.getStickyColProps,
       onTableBodyScrollMock = _useTableContext.onTableBodyScrollMock,
       scrollHeaderElementRef = _useTableContext.scrollHeaderElementRef,
-      leafColumns = _useTableContext.leafColumns,
-      getTableHeaderProps = _useTableContext.getTableHeaderProps,
-      showColMenu = _useTableContext.showColMenu;
+      getTableHeaderProps = _useTableContext.getTableHeaderProps;
 
-  var activeColumnKeysAction = useCheckState();
   var cls = cx(prefixCls, className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: cls,
@@ -48,60 +35,9 @@ var TableHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       width: '100%',
       position: 'relative'
     }
-  }, /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
-    return /*#__PURE__*/React__default.createElement("col", Object.assign({
-      key: idx,
-      className: prefixCls + "-col"
-    }, getColgroupProps(col, idx)));
-  })), /*#__PURE__*/React__default.createElement("thead", {
+  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, {
     onWheel: onTableBodyScrollMock
-  }, groupedColumns.map(function (cols, colsIndex) {
-    return /*#__PURE__*/React__default.createElement("tr", {
-      key: colsIndex
-    }, cols.map(function (col, colIndex) {
-      var _ref2 = col || {},
-          dataKey = _ref2.dataKey,
-          title = _ref2.title,
-          raw = _ref2.raw;
-
-      var titleContent = isFunction(title) ? title(col) : title;
-      var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
-        key: dataKey
-      }, getStickyColProps(col), {
-        className: cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active"),
-        // @ts-ignore
-        colSpan: col.colSpan,
-        // @ts-ignore
-        rowSpan: col.rowSpan
-      }), titleContent, renderFilter({
-        prefixCls: prefixCls + "-filter",
-        columnKey: dataKey,
-        showColMenu: showColMenu,
-        column: col,
-        onOpen: function onOpen() {
-          return activeColumnKeysAction.add(dataKey);
-        },
-        onClose: function onClose() {
-          return activeColumnKeysAction.remove(dataKey);
-        }
-      }));
-      return resizable && colIndex !== colWidths.length - 1 ? /*#__PURE__*/React__default.createElement(Resizable, {
-        key: colIndex,
-        className: prefixCls + "__resizable",
-        draggableOpts: {
-          enableUserSelectHack: false
-        },
-        handle: /*#__PURE__*/React__default.createElement("span", {
-          className: prefixCls + "__resizable-handle"
-        }),
-        height: 0,
-        width: colWidths[colIndex],
-        onResize: function onResize(evt, options) {
-          onColumnResizable(evt, options, colIndex);
-        }
-      }, cell) : cell;
-    }));
-  }))));
+  })));
 });
 
 if (__DEV__) {

package/lib/esm/TbodyContent.js

@@ -0,0 +1,105 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React__default, { forwardRef } from 'react';
+import { getPrefixCls } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+import { EmptyState } from '@hi-ui/empty-state';
+import { TableRow } from './TableRow.js';
+import { useTableContext } from './context.js';
+
+var _prefix = getPrefixCls('table-body');
+
+var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
+      emptyContent = _ref.emptyContent;
+
+  var _useTableContext = useTableContext(),
+      columns = _useTableContext.columns,
+      isExpandTreeRows = _useTableContext.isExpandTreeRows,
+      transitionData = _useTableContext.transitionData,
+      scrollBodyElementRef = _useTableContext.scrollBodyElementRef,
+      hasAvgColumn = _useTableContext.hasAvgColumn,
+      avgRow = _useTableContext.avgRow,
+      hasSumColumn = _useTableContext.hasSumColumn,
+      sumRow = _useTableContext.sumRow,
+      measureRowElementRef = _useTableContext.measureRowElementRef;
+
+  var getRequiredProps = useLatestCallback(function (id) {
+    return {
+      // @ts-ignore
+      expandedTree: isExpandTreeRows(id) // checked: isCheckedId(id),
+      // semiChecked: isSemiCheckedId(id),
+      // selected: selectedId === id,
+      // loading: isLoadingId(id),
+      // focused: focusedId === id,
+
+    };
+  }); // 外层增加 div 作为滚动容器
+
+  return /*#__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: index === 0 ? measureRowElementRef : null,
+      // key={depth + index}
+      key: row.id,
+      // @ts-ignore
+      rowIndex: index,
+      rowData: row
+    }, getRequiredProps(row.id)));
+  }), hasSumColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
+    key: sumRow.id,
+    rowIndex: transitionData.length,
+    rowData: sumRow,
+    isSumRow: true
+  }) : null, hasAvgColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
+    key: avgRow.id,
+    rowIndex: transitionData.length + 1,
+    rowData: avgRow,
+    isAvgRow: true
+  }) : null) : // 空状态，colSpan 占满表格整行
+  renderEmptyContent(Object.assign({
+    className: prefixCls + "-empty-content",
+    colSpan: columns.length,
+    emptyContent: emptyContent
+  }, scrollBodyElementRef.current ? {
+    scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
+  } : {})));
+});
+
+if (__DEV__) {
+  TbodyContent.displayName = 'TbodyContent';
+}
+/**
+ * 负责空状态渲染
+ */
+
+
+var renderEmptyContent = function renderEmptyContent(_ref2) {
+  var className = _ref2.className,
+      colSpan = _ref2.colSpan,
+      emptyContent = _ref2.emptyContent,
+      scrollBodyWidth = _ref2.scrollBodyWidth;
+  return /*#__PURE__*/React__default.createElement("tr", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: colSpan
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'sticky',
+      left: 0,
+      width: scrollBodyWidth !== null && scrollBodyWidth !== void 0 ? scrollBodyWidth : '100%',
+      overflow: 'hidden'
+    }
+  }, emptyContent || /*#__PURE__*/React__default.createElement(EmptyState, null))));
+};
+
+export { TbodyContent, renderEmptyContent };