@hi-ui/table 4.12.0 → 4.12.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hi-ui/table
 
+## 4.12.2
+
+### Patch Changes
+
+- [#3382](https://github.com/XiaoMi/hiui/pull/3382) [`144de50f5`](https://github.com/XiaoMi/hiui/commit/144de50f528c834942d1d04467f7234c1710f758) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 统计行加上表头分组情况的处理 (#3381)
+
+- Updated dependencies [[`d5b4363`](https://github.com/XiaoMi/hiui/commit/d5b4363888ebc0869a70482de2eb114326ee4d3c)]:
+  - @hi-ui/core@4.0.10
+
+## 4.12.1
+
+### Patch Changes
+
+- [#3328](https://github.com/XiaoMi/hiui/pull/3328) [`6e274310f`](https://github.com/XiaoMi/hiui/commit/6e274310f9545a82090ffa586cf31a7c79b305ba) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 优化列宽设置逻辑，确保在列变化时准确计算并更新列宽 (#3327)
+
+- [#3330](https://github.com/XiaoMi/hiui/pull/3330) [`df35306`](https://github.com/XiaoMi/hiui/commit/df353062b0d0b0cf3bd4e62280df20ba7e7a4774) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 修复设置 scrollbar 后冻结列失效问题 (#3329)
+
 ## 4.12.0
 
 ### Minor Changes

package/lib/cjs/BaseTable.js

@@ -132,6 +132,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [embedExpandable, getEmbedPanelColumn, columns]);
   var i18n = core.useLocaleContext();
   var _useMemo = React.useMemo(function () {
+      var _a;
+      // 确保包含 avg 属性，且值为数字类型的字符串
       // 确保包含 avg 属性，且值为数字类型的字符串
       var avgRow = {
         id: 'avg',
@@ -140,9 +142,15 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         }
       };
       var hasAvgColumn = false;
-      columns.forEach(function (column, index$1) {
-        // 行选中模式下，index=0是checkbox列，index=1才是第一列 ; fix issue: https://github.com/XiaoMi/hiui/issues/2863
-        if (index$1 === 0 || index$1 === 1 && columns[0].dataKey === Table.SELECTION_DATA_KEY) {
+      var flattenedColumns = index.flattenColumns(columns);
+      // 找第一个非选择框列
+      // 找第一个非选择框列
+      var firstDataColumnIndex = 0;
+      if (((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dataKey) === Table.SELECTION_DATA_KEY) {
+        firstDataColumnIndex = 1;
+      }
+      flattenedColumns.forEach(function (column, index$1) {
+        if (index$1 === firstDataColumnIndex) {
           // @ts-ignore
           avgRow.raw[column.dataKey] = i18n.get('table.average');
         }
@@ -161,6 +169,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     avgRow = _useMemo.avgRow,
     hasAvgColumn = _useMemo.hasAvgColumn;
   var _useMemo2 = React.useMemo(function () {
+      var _a;
+      // 确保包含total属性，且值为数字类型的字符串
       // 确保包含total属性，且值为数字类型的字符串
       var sumRow = {
         id: 'sum',
@@ -169,16 +179,19 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         }
       };
       var hasSumColumn = false;
-      columns.forEach(function (column, index$1) {
-        if (index$1 === 0 || index$1 === 1 && columns[0].dataKey === Table.SELECTION_DATA_KEY) {
+      var flattenedColumns = index.flattenColumns(columns);
+      var firstDataColumnIndex = 0;
+      if (((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dataKey) === Table.SELECTION_DATA_KEY) {
+        firstDataColumnIndex = 1;
+      }
+      flattenedColumns.forEach(function (column, index$1) {
+        if (index$1 === firstDataColumnIndex) {
           // @ts-ignore
           sumRow.raw[column.dataKey] = i18n.get('table.total');
         }
         if (index.checkNeedTotalOrEvg(data, column, 'total')) {
           hasSumColumn = true;
-          // 获取当前数据最大小数点个数，并设置最后总和值小数点
           // @ts-ignore
-          // 获取当前数据最大小数点个数，并设置最后总和值小数点
           // @ts-ignore
           sumRow.raw[column.dataKey] = index.getTotalOrEvgRowData(data, column, false);
         }
@@ -217,22 +230,27 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
   var renderTable = function renderTable() {
-    var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", {
-      ref: scrollBodyElementRef,
-      className: prefixCls + "-content",
-      onScroll: onTableBodyScroll,
-      style: {
-        // 表格宽度大于div宽度才出现横向滚动条
-        overflowX: canScroll ? 'scroll' : undefined
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("table", {
+    var tableContent = /*#__PURE__*/React__default["default"].createElement("table", {
       ref: bodyTableRef,
       style: {
         width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
       }
     }, /*#__PURE__*/React__default["default"].createElement(ColGroupContent.ColGroupContent, null), /*#__PURE__*/React__default["default"].createElement(TheadContent.TheadContent, null), /*#__PURE__*/React__default["default"].createElement(TbodyContent.TbodyContent, {
       emptyContent: emptyContent
-    })));
+    }));
+    var singleTableContent = /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+      className: prefixCls + "-content"
+    }, !scrollbar ? {
+      ref: scrollBodyElementRef,
+      onScroll: onTableBodyScroll,
+      style: {
+        // 表格宽度大于div宽度才出现横向滚动条
+        overflowX: canScroll ? 'scroll' : undefined
+      }
+    } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({
+      ref: scrollBodyElementRef,
+      onScroll: onTableBodyScroll
+    }, typeAssertion.isObject(scrollbar) ? scrollbar : null), tableContent)));
     var doubleTableContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default["default"].createElement(TableHeader.TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         position: 'absolute',
@@ -244,7 +262,7 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, extraHeader)) : null), /*#__PURE__*/React__default["default"].createElement(TableBody.TableBody, {
       emptyContent: emptyContent
     }));
-    return needDoubleTable ? doubleTableContent : !scrollbar ? singleTableContent : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({}, typeAssertion.isObject(scrollbar) ? scrollbar : null), singleTableContent));
+    return needDoubleTable ? doubleTableContent : singleTableContent;
   };
   var renderFreezeShadow = function renderFreezeShadow() {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/cjs/Table.js

@@ -206,6 +206,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var rowKey = getRowKeyField(rowItem);
       var checked = isCheckedRowKey(rowKey);
       var disabledCheckbox = checkRowIsDisabledCheckbox(rowItem);
+      if (rowItem.key === 'avg' || rowItem.key === 'sum') {
+        return {
+          node: null,
+          checked: false
+        };
+      }
       return {
         node: type === 'checkbox' ? ( /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
           checked: checked,

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

@@ -35,6 +35,9 @@ var useColWidth = function useColWidth(_ref) {
     }),
     colWidths = _React$useState[0],
     setColWidths = _React$useState[1];
+  /**
+   * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
+   */
   var getWidths = React.useCallback(function (measureRowElement) {
     if (measureRowElement && measureRowElement.childNodes) {
       // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
@@ -105,16 +108,12 @@ var useColWidth = function useColWidth(_ref) {
     }
   }, [getVirtualWidths, virtual]);
   useUpdateEffect.useUpdateEffect(function () {
+    // 当列变化时，重新设置列宽
     setColWidths(index.getGroupItemWidth(columns).colWidths);
-    // setColWidths((prev) => {
-    //   // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
-    //   // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
-    //   return resizable && measureRowElementRef.current?.childNodes.length === prev.length
-    //     ? // 走更新逻辑
-    //       getWidths(measureRowElementRef.current)
-    //     : // 当列数变化时重新走初始化逻辑
-    //       getGroupItemWidth(columns)
-    // })
+    // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
+    requestAnimationFrame(function () {
+      setColWidths(getWidths(measureRowElementRef.current));
+    });
   }, [columns]);
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度

package/lib/cjs/utils/index.js

@@ -223,7 +223,23 @@ var getColumnByDefaultSortOrder = function getColumnByDefaultSortOrder(columns)
   }
   return {};
 };
+var flattenColumns = function flattenColumns(columns) {
+  var result = [];
+  var traverse = function traverse(cols) {
+    cols.forEach(function (col) {
+      var _a;
+      if ((_a = col.children) === null || _a === void 0 ? void 0 : _a.length) {
+        traverse(col.children);
+      } else {
+        result.push(col);
+      }
+    });
+  };
+  traverse(columns);
+  return result;
+};
 exports.checkNeedTotalOrEvg = checkNeedTotalOrEvg;
+exports.flattenColumns = flattenColumns;
 exports.getColumnByDataKey = getColumnByDataKey;
 exports.getColumnByDefaultSortOrder = getColumnByDefaultSortOrder;
 exports.getGroupItemWidth = getGroupItemWidth;

package/lib/esm/BaseTable.js

@@ -20,7 +20,7 @@ import { TableBody } from './TableBody.js';
 import { TableHeader } from './TableHeader.js';
 import { defaultLoadingIcon } from './icons/index.js';
 import { TableProvider } from './context.js';
-import { uuid, checkNeedTotalOrEvg, getTotalOrEvgRowData } from './utils/index.js';
+import { uuid, flattenColumns, 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';
@@ -119,6 +119,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [embedExpandable, getEmbedPanelColumn, columns]);
   var i18n = useLocaleContext();
   var _useMemo = useMemo(function () {
+      var _a;
+      // 确保包含 avg 属性，且值为数字类型的字符串
       // 确保包含 avg 属性，且值为数字类型的字符串
       var avgRow = {
         id: 'avg',
@@ -127,9 +129,15 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
         }
       };
       var hasAvgColumn = false;
-      columns.forEach(function (column, index) {
-        // 行选中模式下，index=0是checkbox列，index=1才是第一列 ; fix issue: https://github.com/XiaoMi/hiui/issues/2863
-        if (index === 0 || index === 1 && columns[0].dataKey === SELECTION_DATA_KEY) {
+      var flattenedColumns = flattenColumns(columns);
+      // 找第一个非选择框列
+      // 找第一个非选择框列
+      var firstDataColumnIndex = 0;
+      if (((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dataKey) === SELECTION_DATA_KEY) {
+        firstDataColumnIndex = 1;
+      }
+      flattenedColumns.forEach(function (column, index) {
+        if (index === firstDataColumnIndex) {
           // @ts-ignore
           avgRow.raw[column.dataKey] = i18n.get('table.average');
         }
@@ -148,6 +156,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
     avgRow = _useMemo.avgRow,
     hasAvgColumn = _useMemo.hasAvgColumn;
   var _useMemo2 = useMemo(function () {
+      var _a;
+      // 确保包含total属性，且值为数字类型的字符串
       // 确保包含total属性，且值为数字类型的字符串
       var sumRow = {
         id: 'sum',
@@ -156,16 +166,19 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
         }
       };
       var hasSumColumn = false;
-      columns.forEach(function (column, index) {
-        if (index === 0 || index === 1 && columns[0].dataKey === SELECTION_DATA_KEY) {
+      var flattenedColumns = flattenColumns(columns);
+      var firstDataColumnIndex = 0;
+      if (((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dataKey) === SELECTION_DATA_KEY) {
+        firstDataColumnIndex = 1;
+      }
+      flattenedColumns.forEach(function (column, index) {
+        if (index === firstDataColumnIndex) {
           // @ts-ignore
           sumRow.raw[column.dataKey] = i18n.get('table.total');
         }
         if (checkNeedTotalOrEvg(data, column, 'total')) {
           hasSumColumn = true;
-          // 获取当前数据最大小数点个数，并设置最后总和值小数点
           // @ts-ignore
-          // 获取当前数据最大小数点个数，并设置最后总和值小数点
           // @ts-ignore
           sumRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, false);
         }
@@ -204,22 +217,27 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
   var renderTable = function renderTable() {
-    var singleTableContent = /*#__PURE__*/React__default.createElement("div", {
-      ref: scrollBodyElementRef,
-      className: prefixCls + "-content",
-      onScroll: onTableBodyScroll,
-      style: {
-        // 表格宽度大于div宽度才出现横向滚动条
-        overflowX: canScroll ? 'scroll' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("table", {
+    var tableContent = /*#__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 singleTableContent = /*#__PURE__*/React__default.createElement("div", Object.assign({
+      className: prefixCls + "-content"
+    }, !scrollbar ? {
+      ref: scrollBodyElementRef,
+      onScroll: onTableBodyScroll,
+      style: {
+        // 表格宽度大于div宽度才出现横向滚动条
+        overflowX: canScroll ? 'scroll' : undefined
+      }
+    } : {}), !scrollbar ? tableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({
+      ref: scrollBodyElementRef,
+      onScroll: onTableBodyScroll
+    }, isObject(scrollbar) ? scrollbar : null), tableContent)));
     var doubleTableContent = /*#__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',
@@ -231,7 +249,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, extraHeader)) : null), /*#__PURE__*/React__default.createElement(TableBody, {
       emptyContent: emptyContent
     }));
-    return needDoubleTable ? doubleTableContent : !scrollbar ? singleTableContent : ( /*#__PURE__*/React__default.createElement(Scrollbar, Object.assign({}, isObject(scrollbar) ? scrollbar : null), singleTableContent));
+    return needDoubleTable ? doubleTableContent : singleTableContent;
   };
   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", {

package/lib/esm/Table.js

@@ -191,6 +191,12 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       var rowKey = getRowKeyField(rowItem);
       var checked = isCheckedRowKey(rowKey);
       var disabledCheckbox = checkRowIsDisabledCheckbox(rowItem);
+      if (rowItem.key === 'avg' || rowItem.key === 'sum') {
+        return {
+          node: null,
+          checked: false
+        };
+      }
       return {
         node: type === 'checkbox' ? ( /*#__PURE__*/React__default.createElement(Checkbox, {
           checked: checked,

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

@@ -23,6 +23,9 @@ var useColWidth = function useColWidth(_ref) {
     }),
     colWidths = _React$useState[0],
     setColWidths = _React$useState[1];
+  /**
+   * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
+   */
   var getWidths = useCallback(function (measureRowElement) {
     if (measureRowElement && measureRowElement.childNodes) {
       // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
@@ -93,16 +96,12 @@ var useColWidth = function useColWidth(_ref) {
     }
   }, [getVirtualWidths, virtual]);
   useUpdateEffect(function () {
+    // 当列变化时，重新设置列宽
     setColWidths(getGroupItemWidth(columns).colWidths);
-    // setColWidths((prev) => {
-    //   // resizable 模式下通过 measureRowElementRef.current 去更新列宽，防止拖拽后宽度被重置
-    //   // 例如同时设置了 resizable 和 rowSelection，当拖拽某列宽度后再选中某行时，该列宽度会被重置
-    //   return resizable && measureRowElementRef.current?.childNodes.length === prev.length
-    //     ? // 走更新逻辑
-    //       getWidths(measureRowElementRef.current)
-    //     : // 当列数变化时重新走初始化逻辑
-    //       getGroupItemWidth(columns)
-    // })
+    // 重新设置列宽后，真实的宽度会发生变化，基于真实的宽度再次重新计算出合适的列宽
+    requestAnimationFrame(function () {
+      setColWidths(getWidths(measureRowElementRef.current));
+    });
   }, [columns]);
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度

package/lib/esm/utils/index.js

@@ -218,4 +218,19 @@ var getColumnByDefaultSortOrder = function getColumnByDefaultSortOrder(columns)
   }
   return {};
 };
-export { checkNeedTotalOrEvg, getColumnByDataKey, getColumnByDefaultSortOrder, getGroupItemWidth, getTotalOrEvgRowData, parseFixedColumns, parseLocalArray, setColumnsDefaultWidth, uuid };
+var flattenColumns = function flattenColumns(columns) {
+  var result = [];
+  var traverse = function traverse(cols) {
+    cols.forEach(function (col) {
+      var _a;
+      if ((_a = col.children) === null || _a === void 0 ? void 0 : _a.length) {
+        traverse(col.children);
+      } else {
+        result.push(col);
+      }
+    });
+  };
+  traverse(columns);
+  return result;
+};
+export { checkNeedTotalOrEvg, flattenColumns, getColumnByDataKey, getColumnByDefaultSortOrder, getGroupItemWidth, getTotalOrEvgRowData, parseFixedColumns, parseLocalArray, setColumnsDefaultWidth, uuid };

package/lib/types/utils/index.d.ts

@@ -27,3 +27,4 @@ export declare const getColumnByDataKey: (columns: TableColumnItem[], dataKey: s
  * 获取默认排序的列
  */
 export declare const getColumnByDefaultSortOrder: (columns: TableColumnItem[]) => TableColumnItem;
+export declare const flattenColumns: (columns: TableColumnItem[]) => TableColumnItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "4.12.0",
+  "version": "4.12.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -78,12 +78,12 @@
     "react-resizable": "^3.0.4"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.8",
+    "@hi-ui/core": ">=4.0.10",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.8",
+    "@hi-ui/core": "^4.0.10",
     "@hi-ui/core-css": "^4.1.5",
     "@types/react-resizable": "^1.7.4",
     "react": "^17.0.1",