@hi-ui/table 5.0.0-canary.24 → 5.0.0-canary.26

package/lib/cjs/use-table.js

@@ -468,7 +468,10 @@ var useTable = function useTable(_a) {
       return acc;
     }, []);
   }, [mergedColumns1]);
-  var getStickyColProps = useLatest.useLatestCallback(function (column) {
+  var getStickyColProps = useLatest.useLatestCallback(function (column, type) {
+    if (type === void 0) {
+      type = 'td';
+    }
     var rightStickyWidth = column.rightStickyWidth,
       leftStickyWidth = column.leftStickyWidth,
       align = column.align;
@@ -478,10 +481,10 @@ var useTable = function useTable(_a) {
     };
     if (sticky) {
       style.position = 'sticky';
-      style.right = rightStickyWidth + 'px';
-      style.left = leftStickyWidth + 'px';
-      // the value is same with v3
-      style.zIndex = 5;
+      style.insetInlineEnd = rightStickyWidth + 'px';
+      style.insetInlineStart = leftStickyWidth + 'px';
+      // the value is same with v4
+      style.zIndex = type === 'th' ? 5 : 4;
     }
     return {
       style: style,
@@ -491,7 +494,7 @@ var useTable = function useTable(_a) {
   var getTableHeaderProps = React__default["default"].useCallback(function () {
     var style = {
       position: sticky ? 'sticky' : 'relative',
-      top: sticky ? stickyTop : undefined,
+      insetBlockStart: sticky ? stickyTop : undefined,
       overflow: 'hidden',
       zIndex: sticky ? 10 : undefined
     };

package/lib/cjs/utils/index.js

@@ -68,26 +68,29 @@ var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWid
 var getGroupItemWidth = function getGroupItemWidth(columns) {
   var colWidths = [];
   var minColWidths = [];
+  var flattedColumnsWithoutChildren = [];
   var dig = function dig(column) {
-    column.forEach(function (_ref) {
-      var children = _ref.children,
-        width = _ref.width,
-        minWidth = _ref.minWidth;
+    column.forEach(function (item) {
+      var children = item.children,
+        width = item.width,
+        minWidth = item.minWidth;
       if (Array.isArray(children)) {
         dig(children);
         return;
       }
       // 如果没有设置列宽度，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);
+      flattedColumnsWithoutChildren.push(item);
     });
   };
   dig(columns);
   return {
     colWidths: colWidths,
-    minColWidths: minColWidths
+    minColWidths: minColWidths,
+    flattedColumnsWithoutChildren: flattedColumnsWithoutChildren
   };
 };
 var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, key, parentStickyWidth) {
@@ -149,9 +152,9 @@ var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, ke
 var uuid = function uuid() {
   return Math.random().toString(36).substring(5).split('').join('.');
 };
-var parseLocalArray = function parseLocalArray(_ref3) {
-  var key = _ref3.key,
-    defaultValue = _ref3.defaultValue;
+var parseLocalArray = function parseLocalArray(_ref2) {
+  var key = _ref2.key,
+    defaultValue = _ref2.defaultValue;
   if (key) {
     try {
       var localArr = window.localStorage.getItem(key);
@@ -223,7 +226,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';
@@ -93,6 +93,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       dataKey: EMBED_DATA_KEY,
       title: '',
       width: 38,
+      fixed: true,
       className: prefixCls + "__embed-col",
       align: 'center',
       render: function render(_, rowItem) {
@@ -125,6 +126,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',
@@ -133,9 +136,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');
         }
@@ -154,6 +163,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',
@@ -162,16 +173,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);
         }
@@ -210,7 +224,30 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   var extraHeader = extra && extra.header;
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
+  var wrapperRef = React__default.useRef(null);
+  var isTableContentExceedWrapperHeight = bodyTableRef.current && wrapperRef.current && bodyTableRef.current.offsetHeight > wrapperRef.current.offsetHeight;
   var renderTable = function renderTable() {
+    if (needDoubleTable) {
+      var _a2 = getTableHeaderProps(),
+        style = _a2.style,
+        restTableHeaderProps = __rest(_a2, ["style"]);
+      var doubleTableContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, restTableHeaderProps, {
+        style: Object.assign(Object.assign({}, style), {
+          overflow: undefined
+        })
+      }), /*#__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
+      }));
+      return doubleTableContent;
+    }
     var tableContent = /*#__PURE__*/React__default.createElement("table", {
       ref: bodyTableRef,
       style: {
@@ -232,25 +269,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       ref: scrollBodyElementRef,
       onScroll: onTableBodyScroll
     }, isObject(scrollbar) ? scrollbar : null), tableContent)));
-    var _a = getTableHeaderProps(),
-      style = _a.style,
-      restTableHeaderProps = __rest(_a, ["style"]);
-    var doubleTableContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, restTableHeaderProps, {
-      style: Object.assign(Object.assign({}, style), {
-        overflow: undefined
-      })
-    }), /*#__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
-    }));
-    return needDoubleTable ? doubleTableContent : singleTableContent;
+    return 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", {
@@ -278,7 +297,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
     role: role,
     className: cls
   }, rootProps), /*#__PURE__*/React__default.createElement("div", {
-    className: prefixCls + "__wrapper"
+    ref: wrapperRef,
+    className: cx(prefixCls + "__wrapper", isTableContentExceedWrapperHeight && prefixCls + "--exceed-wrapper-height")
   }, /*#__PURE__*/React__default.createElement(TableProvider, {
     value: Object.assign(Object.assign({}, providedValue), {
       striped: striped,

package/lib/esm/Table.js

@@ -32,7 +32,7 @@ var _prefix = getPrefixCls('table');
  * 需要使用双表格的场景对应的 API
  * 这些场景下的功能无法通过单表格实现，故而设计成双表格，即表头和表体分别用一个 table 实现
  */
-var DOUBLE_TABLE_SCENE = ['needDoubleTable', 'maxHeight', 'sticky', 'stickyTop', 'setting', 'virtual', 'stretchHeight'];
+var DOUBLE_TABLE_SCENE = ['needDoubleTable', 'maxHeight', 'sticky', 'stickyTop', 'setting', 'virtual'];
 var STANDARD_PRESET = {
   striped: true,
   bordered: true,
@@ -74,9 +74,10 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
     rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data"]);
   // 是否需要双表格
+  // 当 data 为空时，如果使用单表格，在表头分组下会导致表头错位（原生 table 特性），故而该情况下也要使用双表格
   var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
     return !!rest[prop];
-  });
+  }) || data.length === 0;
   var virtual = rest.virtual;
   // ************************ 预置标准模式 ************************ //
   var tableProps = withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
@@ -191,6 +192,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/TableCell.js

@@ -92,7 +92,7 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cls = cx(prefixCls, className, raw.className, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
   if (virtual) {
     var width = colWidths[colIndex];
-    var colProps = getStickyColProps(column);
+    var colProps = getStickyColProps(column, 'td');
     return /*#__PURE__*/React__default.createElement("div", Object.assign({
       ref: ref,
       key: dataKey,
@@ -130,7 +130,7 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     key: dataKey,
     className: cls
-  }, getStickyColProps(column), {
+  }, getStickyColProps(column, 'td'), {
     colSpan: cellContent.props.colSpan,
     rowSpan: cellContent.props.rowSpan,
     // 按需绑定函数，避免频繁调用 setState 特别消耗性能

package/lib/esm/TbodyContent.js

@@ -33,7 +33,8 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     sumRow = _useTableContext.sumRow,
     measureRowElementRef = _useTableContext.measureRowElementRef,
     rowClassName = _useTableContext.rowClassName,
-    fixedToRow = _useTableContext.fixedToRow;
+    fixedToRow = _useTableContext.fixedToRow,
+    flattedColumnsWithoutChildren = _useTableContext.flattedColumnsWithoutChildren;
   var getRequiredProps = useLatestCallback(function (id) {
     return {
       // @ts-ignore
@@ -79,19 +80,27 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     measureRowElementRefNeedUpdate.current = true;
   }, [columns]);
   // 外层增加 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("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
+    ref: measureRowElementRef,
+    "aria-hidden": true,
+    style: {
+      height: 0
+    }
+  }, flattedColumnsWithoutChildren.map(function (column) {
+    return /*#__PURE__*/React__default.createElement("td", {
+      key: column.id,
+      style: {
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        borderTop: 'none',
+        borderBottom: 'none'
+      }
+    });
+  })), 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(el) {
-        // 当 el 的子节点数量和 columns 的数量相等时（考虑单元格合并的情况），并且measureRowElementRefNeedUpdate.current为true时，才更新measureRowElementRef
-        if ((el === null || el === void 0 ? void 0 : el.childNodes.length) === columns.length && measureRowElementRefNeedUpdate.current) {
-          measureRowElementRef.current = el;
-          measureRowElementRefNeedUpdate.current = false;
-        }
-      },
-      // key={depth + index}
       key: row.id,
       className: cx.apply(void 0, [rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)].concat(fixedToRowTopClassName(row, index))),
-      // @ts-ignore
       rowIndex: index,
       rowData: row
     }, getRequiredProps(row.id)));

package/lib/esm/TheadContent.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, useRef } from 'react';
 import { Resizable } from 'react-resizable';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
@@ -34,12 +34,20 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
     setHeaderTableElement = _useTableContext.setHeaderTableElement,
     _onResizeStop = _useTableContext.onResizeStop;
   var activeColumnKeysAction = useCheckState();
+  var trRefs = useRef([]);
   return /*#__PURE__*/React__default.createElement("thead", Object.assign({}, rest), groupedColumns.map(function (cols, colsIndex) {
     return /*#__PURE__*/React__default.createElement("tr", {
       key: colsIndex,
-      ref: setHeaderTableElement
+      ref: function ref(el) {
+        if (el) {
+          trRefs.current[colsIndex] = el;
+          if (colsIndex === 0) {
+            setHeaderTableElement(el);
+          }
+        }
+      }
     }, cols.map(function (col, colIndex) {
-      var _a;
+      var _a, _b;
       var _ref = col || {},
         dataKey = _ref.dataKey,
         title = _ref.title,
@@ -56,11 +64,12 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
           groupLastColumn = true;
         }
       }
-      var stickyColProps = getStickyColProps(col);
+      var stickyColProps = getStickyColProps(col, 'th');
       var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
         key: dataKey
       }, stickyColProps, {
         style: Object.assign(Object.assign({}, stickyColProps.style), {
+          insetBlockStart: (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop,
           // 表头合并场景下，被合并的表头需要隐藏
           display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined
         }),

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

@@ -26,17 +26,21 @@ var useColWidth = function useColWidth(_ref) {
     setColWidths = _React$useState[1];
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
+   * 如果实际总宽度大于设置的宽度，则将多余的宽度平分到没有设置 fixed 的列上
    */
   var getWidths = useCallback(function (measureRowElement) {
     if (measureRowElement && measureRowElement.childNodes) {
       // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
       var exceedWidth = 0;
+      var _getGroupItemWidth = getGroupItemWidth(columns),
+        flattedColumnsWithoutChildren = _getGroupItemWidth.flattedColumnsWithoutChildren,
+        _colWidths = _getGroupItemWidth.colWidths;
       var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
         var _a;
         var realWidth = node.offsetWidth || 60;
-        var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
+        var _ref2 = (_a = flattedColumnsWithoutChildren[index]) !== null && _a !== void 0 ? _a : {},
           fixed = _ref2.fixed;
-        var width = getGroupItemWidth(columns).colWidths[index];
+        var width = _colWidths[index];
         // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
         if (fixed && width && width < realWidth) {
           exceedWidth += realWidth - width;
@@ -46,12 +50,12 @@ var useColWidth = function useColWidth(_ref) {
       });
       // 如果有多余的宽度，则将多余的宽度平分到没有设置 fixed 的列上
       if (exceedWidth > 0) {
-        var noFixedColumns = columns.filter(function (item) {
+        var noFixedColumns = flattedColumnsWithoutChildren.filter(function (item) {
           return !item.fixed;
         });
         _realColumnsWidth = _realColumnsWidth.map(function (item, index) {
           var _a;
-          if (!((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.fixed)) {
+          if (!((_a = flattedColumnsWithoutChildren[index]) === null || _a === void 0 ? void 0 : _a.fixed)) {
             return item + Math.floor(exceedWidth / noFixedColumns.length);
           }
           return item;
@@ -143,7 +147,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;
@@ -161,8 +165,8 @@ var useColWidth = function useColWidth(_ref) {
   var _React$useState2 = React__default.useState(null),
     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
@@ -170,17 +174,26 @@ 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];
+          var _a;
+          var _getGroupItemWidth2 = getGroupItemWidth(columns),
+            colWidths = _getGroupItemWidth2.colWidths,
+            minColWidths = _getGroupItemWidth2.minColWidths;
+          var colWidth = colWidths[index];
+          var minColWidth = 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 = ((_a = childNode) === null || _a === void 0 ? void 0 : _a.offsetWidth) + thPaddingLeft * 2;
+          // 如果设置的标题宽度小于真实内容宽度，则使用设置的宽度，否则使用真实内容宽度
+          if (colWidth && colWidth < childNodeWidth) {
+            return colWidth;
+          }
+          return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
       });
@@ -192,25 +205,6 @@ var useColWidth = function useColWidth(_ref) {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
   }, [columns, columns.length, headerTableElement, resizable]);
-  /**
-   *  控制列最小可调整宽度
-   */
-  React__default.useMemo(function () {
-    if (resizable && headerTableElement) {
-      var resizableHandlerWidth = 4;
-      var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
-        var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-        var childNodes = Array.from(th.childNodes);
-        return childNodes.map(function (child) {
-          return child.offsetWidth;
-        }).reduce(function (prev, next) {
-          return prev + next;
-        }) + thPaddingLeft * 2 + resizableHandlerWidth;
-      });
-      return _minColWidth;
-    }
-    return Array(columns.length).fill(0);
-  }, [columns.length, headerTableElement, resizable]);
   /**
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */
@@ -237,15 +231,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/hooks/use-colgroup.js

@@ -30,7 +30,7 @@ var useColumns = function useColumns(_ref) {
           // TODO: remove it
           dataKey: raw.dataKey,
           title: raw.title,
-          align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
+          align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'start',
           render: raw.render,
           colSpan: raw.colSpan
         });

package/lib/esm/node_modules/rc-virtual-list/es/List.js

@@ -383,7 +383,12 @@ function RawList(props, ref) {
   useLayoutEffect(function () {
     if (onVisibleChange) {
       var renderList = mergedData.slice(start, end + 1);
-      onVisibleChange(renderList, mergedData);
+      onVisibleChange(renderList, mergedData, {
+        start: start,
+        end: end,
+        scrollTop: scrollTop,
+        heights: heights
+      });
     }
   }, [start, end, mergedData]); // ================================ Render ================================
 

package/lib/esm/node_modules/rc-virtual-list/es/hooks/useHeights.js

@@ -60,6 +60,17 @@ function _iterableToArrayLimit(arr, i) {
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
+
+/**
+ * To get exact height to avoid scrolling deviation
+ */
+function getOuterHeight(el) {
+  var height = el.offsetHeight;
+  var computedStyle = window.getComputedStyle(el);
+  height += parseInt(computedStyle.marginTop, 10);
+  height += parseInt(computedStyle.marginBottom, 10);
+  return height;
+}
 function useHeights(getKey, onItemAdd, onItemRemove) {
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -77,9 +88,9 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
       instanceRef.current.forEach(function (element, key) {
         if (element && element.offsetParent) {
           var htmlElement = findDOMNode(element);
-          var offsetHeight = htmlElement.offsetHeight;
-          if (heightsRef.current.get(key) !== offsetHeight) {
-            heightsRef.current.set(key, htmlElement.offsetHeight);
+          var outerHeight = getOuterHeight(htmlElement);
+          if (heightsRef.current.get(key) !== outerHeight) {
+            heightsRef.current.set(key, outerHeight);
           }
         }
       }); // Always trigger update mark to tell parent that should re-calculate heights when resized