@hi-ui/table 4.12.1 → 4.12.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @hi-ui/table
 
+## 4.12.3
+
+### Patch Changes
+
+- [#3426](https://github.com/XiaoMi/hiui/pull/3426) [`a8cc00c`](https://github.com/XiaoMi/hiui/commit/a8cc00cc9c5591309049c25a458ffcd41e292eba) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 修复设置 minWidth 无效的问题 (#3425)
+
+## 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

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);
         }

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

@@ -126,7 +126,7 @@ var useColWidth = function useColWidth(_ref) {
         if (virtual) {
           setColWidths(getVirtualWidths());
         } else {
-          // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
+          // 当第一行有内容时并且没有重新设置列宽时，再去设置列宽
           // Warning hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
           if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
             hasResetWidths.current = true;
@@ -145,7 +145,7 @@ var useColWidth = function useColWidth(_ref) {
     headerTableElement = _React$useState2[0],
     setHeaderTableElement = _React$useState2[1];
   // 控制列最小可调整宽度
-  var _React$useState3 = React__default["default"].useState([]),
+  var _React$useState3 = React__default["default"].useState(index.getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
   // 当列变化时同步更新 minColWidths
@@ -153,17 +153,16 @@ var useColWidth = function useColWidth(_ref) {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
-        var resizableHandlerWidth = 4;
         var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index$1) {
           var minColWidth = index.getGroupItemWidth(columns).minColWidths[index$1];
+          // 如果设置了最小宽度，则直接使用最小宽度，否则使用标题宽度
+          if (minColWidth !== undefined && minColWidth !== 0) {
+            return minColWidth;
+          }
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-          var childNodes = Array.from(th.childNodes);
-          var childNodesWidth = childNodes.map(function (child) {
-            return child.offsetWidth;
-          }).reduce(function (prev, next) {
-            return prev + next;
-          }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
-          return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
+          var childNode = Array.from(th.childNodes)[0];
+          var childNodeWidth = childNode.offsetWidth + thPaddingLeft * 2;
+          return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
       });
@@ -220,15 +219,15 @@ var useColWidth = function useColWidth(_ref) {
   }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default["default"].useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
-    var minWidth = minColWidths[index] || undefined;
+    // const minWidth = minColWidths[index] || undefined
     return {
       style: {
-        width: width,
-        minWidth: minWidth || width
+        width: width
+        // minWidth: minWidth || width,
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths, minColWidths]);
+  }, [colWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/cjs/utils/index.js

@@ -79,8 +79,8 @@ var getGroupItemWidth = function getGroupItemWidth(columns) {
       }
       // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
       var colWidth = typeAssertion.isNumeric(width) ? Number(width) : 0;
-      var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
-      colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
+      var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : 0;
+      colWidths.push(colWidth);
       minColWidths.push(minColWidth);
     });
   };
@@ -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);
         }

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

@@ -114,7 +114,7 @@ var useColWidth = function useColWidth(_ref) {
         if (virtual) {
           setColWidths(getVirtualWidths());
         } else {
-          // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
+          // 当第一行有内容时并且没有重新设置列宽时，再去设置列宽
           // Warning hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
           if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
             hasResetWidths.current = true;
@@ -133,7 +133,7 @@ var useColWidth = function useColWidth(_ref) {
     headerTableElement = _React$useState2[0],
     setHeaderTableElement = _React$useState2[1];
   // 控制列最小可调整宽度
-  var _React$useState3 = React__default.useState([]),
+  var _React$useState3 = React__default.useState(getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
   // 当列变化时同步更新 minColWidths
@@ -141,17 +141,16 @@ var useColWidth = function useColWidth(_ref) {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
-        var resizableHandlerWidth = 4;
         var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index) {
           var minColWidth = getGroupItemWidth(columns).minColWidths[index];
+          // 如果设置了最小宽度，则直接使用最小宽度，否则使用标题宽度
+          if (minColWidth !== undefined && minColWidth !== 0) {
+            return minColWidth;
+          }
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-          var childNodes = Array.from(th.childNodes);
-          var childNodesWidth = childNodes.map(function (child) {
-            return child.offsetWidth;
-          }).reduce(function (prev, next) {
-            return prev + next;
-          }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
-          return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
+          var childNode = Array.from(th.childNodes)[0];
+          var childNodeWidth = childNode.offsetWidth + thPaddingLeft * 2;
+          return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
       });
@@ -208,15 +207,15 @@ var useColWidth = function useColWidth(_ref) {
   }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default.useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
-    var minWidth = minColWidths[index] || undefined;
+    // const minWidth = minColWidths[index] || undefined
     return {
       style: {
-        width: width,
-        minWidth: minWidth || width
+        width: width
+        // minWidth: minWidth || width,
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths, minColWidths]);
+  }, [colWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/esm/utils/index.js

@@ -74,8 +74,8 @@ var getGroupItemWidth = function getGroupItemWidth(columns) {
       }
       // 如果没有设置列宽度，css 宽度默认是 `auto`，这里对于非数字 width 均设置为 0
       var colWidth = isNumeric(width) ? Number(width) : 0;
-      var minColWidth = isNumeric(minWidth) ? Number(minWidth) : colWidth || 60;
-      colWidths.push(colWidth < minColWidth ? minColWidth : colWidth);
+      var minColWidth = isNumeric(minWidth) ? Number(minWidth) : 0;
+      colWidths.push(colWidth);
       minColWidths.push(minColWidth);
     });
   };
@@ -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/context.d.ts

@@ -5,7 +5,6 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     getStickyColProps: (column: any) => {
@@ -137,7 +136,6 @@ export declare const useTableContext: () => Omit<{
     getColgroupProps: (column: import("./types").FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     getStickyColProps: (column: any) => {

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

@@ -12,7 +12,6 @@ export declare const useColWidth: ({ resizable, tableWidthAdjustOnResize, data,
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableRowElement | null>>;

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

@@ -7,7 +7,6 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
-            minWidth: number | undefined;
         };
     };
     getStickyColProps: (column: any) => {

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.1",
+  "version": "4.12.3",
   "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",