@are-visual/virtual-table 0.10.2 → 0.11.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useRef, createContext, useContext, useMemo, memo, useLayoutEffect, useState, useCallback, useEffect, Fragment, createElement, forwardRef } from 'react';
+import { useRef, createContext, useContext, useMemo, memo, useEffect, useState, useCallback, useLayoutEffect, Fragment, createElement, forwardRef } from 'react';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -322,125 +322,14 @@ function Cell(props) {
 }
 var Cell$1 = /*#__PURE__*/memo(Cell);
 
-var overflowStylePatterns = /auto|scroll|overlay|hidden/;
-function isElement(node) {
-  if (!(node instanceof Node)) {
-    return false;
-  }
-  var ELEMENT_NODE_TYPE = 1;
-  return node.nodeType === ELEMENT_NODE_TYPE;
-}
-function getScrollParent(el, root) {
-  var _el$ownerDocument$def;
-  if (root === void 0) {
-    root = window;
-  }
-  var node = el;
-  while (node !== root && isElement(node)) {
-    if (node === document.body) {
-      return root;
-    }
-    var _window$getComputedSt = window.getComputedStyle(node),
-      overflow = _window$getComputedSt.overflow,
-      overflowY = _window$getComputedSt.overflowY,
-      overflowX = _window$getComputedSt.overflowX;
-    if (overflowStylePatterns.test(overflow + overflowY + overflowX)) {
-      return node;
-    }
-    node = node.parentNode;
-  }
-  return (_el$ownerDocument$def = el.ownerDocument.defaultView) != null ? _el$ownerDocument$def : window;
-}
-function isWindow(arg) {
-  return Object.prototype.toString.call(arg) === '[object Window]';
-}
-function isDocument(arg) {
-  return Object.prototype.toString.call(arg) === '[object HTMLDocument]';
-}
-function isRoot(arg) {
-  return Object.prototype.toString.call(arg) === '[object HTMLHtmlElement]';
-}
-function getScrollElement(el) {
-  if (isDocument(el)) {
-    return el.scrollingElement;
-  }
-  if (isElement(el)) {
-    return el;
-  }
-  return document.scrollingElement;
-}
-function getScrollTop(node) {
-  var result = 0;
-  if (isWindow(node) || isRoot(node)) {
-    result = window.scrollY;
-  } else {
-    var element = getScrollElement(node);
-    result = element.scrollTop;
-  }
-  return result;
-}
-function getRelativeOffsetTop(el, ancestor) {
-  var elRect = el.getBoundingClientRect();
-  var ancestorRect = ancestor.getBoundingClientRect();
-  var ancestorBorderTop = Number.parseFloat(window.getComputedStyle(ancestor).borderTopWidth) || 0;
-  var ancestorScrollTop = ancestor.scrollTop;
-  return elRect.top - ancestorRect.top - ancestorBorderTop + ancestorScrollTop;
-}
-
-function onResize(target, callback) {
-  if (isWindow(target)) {
-    var listener = function listener() {
-      callback({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    };
-    listener();
-    window.addEventListener('resize', listener);
-    return function () {
-      window.removeEventListener('resize', listener);
-    };
-  } else {
-    var observer = new ResizeObserver(function (entries) {
-      var rect = entries[0].contentRect;
-      callback({
-        width: rect.width,
-        height: rect.height
-      });
-    });
-    observer.observe(target);
-    return function () {
-      observer.disconnect();
-    };
-  }
+function getColumnWidth(column, defaultColumnWidth) {
+  return Number.isFinite(column.width) ? column.width : defaultColumnWidth;
 }
 
 var Colgroup = function Colgroup(props) {
   var columns = props.columns,
-    onColumnSizesMeasure = props.onColumnSizesMeasure;
-  var enableMeasure = onColumnSizesMeasure != null;
-  var columnSizes = new Map();
-  var prevColumnSizes = useRef(new Map());
-  var node = useRef(null);
-  useLayoutEffect(function () {
-    if (!enableMeasure) return;
-    var colgroupNode = node.current;
-    if (colgroupNode == null) return;
-    return onResize(colgroupNode, function (_ref) {
-      var width = _ref.width;
-      if (width === 0) return;
-      var sizes = new Map();
-      columnSizes.forEach(function (item, key) {
-        sizes.set(key, item());
-      });
-      if (!isShallowEqual(sizes, prevColumnSizes.current)) {
-        onColumnSizesMeasure(sizes);
-        prevColumnSizes.current = sizes;
-      }
-    });
-  });
+    defaultColumnWidth = props.defaultColumnWidth;
   return jsx("colgroup", {
-    ref: node,
     children: columns.map(function (item) {
       var key = item.key;
       if (item.type === 'blank') {
@@ -452,18 +341,11 @@ var Colgroup = function Colgroup(props) {
         }, key);
       }
       var column = item.column;
+      var width = getColumnWidth(column, defaultColumnWidth);
       return jsx("col", {
-        ref: function ref(node) {
-          if (node == null || !enableMeasure) return;
-          // eslint-disable-next-line react-compiler/react-compiler
-          columnSizes.set(key, function () {
-            return node.offsetWidth;
-          });
-        },
         "data-col-key": key,
         style: {
-          width: column.width,
-          minWidth: column.minWidth
+          width: width
         }
       }, key);
     })
@@ -471,93 +353,7 @@ var Colgroup = function Colgroup(props) {
 };
 var Colgroup$1 = /*#__PURE__*/memo(Colgroup);
 
-function useCalcSize(options) {
-  var getScroller = options.getScroller,
-    root = options.root;
-  var _useState = useState(0),
-    scrollContainerWidth = _useState[0],
-    setScrollContainerWidth = _useState[1];
-  var _useState2 = useState(0),
-    scrollContainerHeight = _useState2[0],
-    setScrollContainerHeight = _useState2[1];
-  var _useState3 = useState(0),
-    tableWidth = _useState3[0],
-    setTableWidth = _useState3[1];
-  var _useState4 = useState(0),
-    tableHeight = _useState4[0],
-    setTableHeight = _useState4[1];
-  var scrollerContainerRef = useRef(null);
-  useLayoutEffect(function () {
-    var scrollerContainer = getScroller();
-    if (scrollerContainer == null) return;
-    var scroller;
-    if (isWindow(scrollerContainer)) {
-      scroller = document.scrollingElement;
-    } else {
-      scroller = scrollerContainer;
-    }
-    scrollerContainerRef.current = scroller;
-    var observer = new ResizeObserver(function (entries) {
-      var _entries$0$contentRec = entries[0].contentRect,
-        width = _entries$0$contentRec.width,
-        height = _entries$0$contentRec.height;
-      setScrollContainerWidth(width);
-      setScrollContainerHeight(height);
-    });
-    observer.observe(scroller);
-    return function () {
-      observer.disconnect();
-    };
-  }, [getScroller]);
-  useLayoutEffect(function () {
-    var node = root.current;
-    if (node == null) return;
-    var observer = new ResizeObserver(function (entries) {
-      var _entries$0$contentRec2 = entries[0].contentRect,
-        width = _entries$0$contentRec2.width,
-        height = _entries$0$contentRec2.height;
-      setTableWidth(width);
-      setTableHeight(height);
-    });
-    observer.observe(node);
-    return function () {
-      observer.disconnect();
-    };
-  }, [root]);
-  return {
-    scrollContainerWidth: scrollContainerWidth,
-    scrollContainerHeight: scrollContainerHeight,
-    tableWidth: tableWidth,
-    tableHeight: tableHeight
-  };
-}
-
 var ContainerSize = /*#__PURE__*/createContext(null);
-function ContainerSizeContext(props) {
-  var getScroller = props.getScroller,
-    root = props.root,
-    children = props.children;
-  var _useCalcSize = useCalcSize({
-      getScroller: getScroller,
-      root: root
-    }),
-    scrollContainerHeight = _useCalcSize.scrollContainerHeight,
-    scrollContainerWidth = _useCalcSize.scrollContainerWidth,
-    tableHeight = _useCalcSize.tableHeight,
-    tableWidth = _useCalcSize.tableWidth;
-  var state = useMemo(function () {
-    return {
-      scrollContainerWidth: scrollContainerWidth,
-      scrollContainerHeight: scrollContainerHeight,
-      tableWidth: tableWidth,
-      tableHeight: tableHeight
-    };
-  }, [scrollContainerWidth, scrollContainerHeight, tableWidth, tableHeight]);
-  return jsx(ContainerSize.Provider, {
-    value: state,
-    children: children
-  });
-}
 function useContainerSize() {
   var context = useContext(ContainerSize);
   if (context == null) {
@@ -619,6 +415,43 @@ function useHorizontalScrollContext() {
   }
   return context;
 }
+function useScrollSynchronize(key) {
+  var _useHorizontalScrollC = useHorizontalScrollContext(),
+    listen = _useHorizontalScrollC.listen,
+    notify = _useHorizontalScrollC.notify;
+  var nodeRef = useRef(null);
+  useEffect(function () {
+    var node = nodeRef.current;
+    if (node == null) return;
+    var onScroll = function onScroll() {
+      notify(key, {
+        scrollLeft: function scrollLeft() {
+          return node.scrollLeft;
+        },
+        node: node
+      });
+    };
+    var addEvent = function addEvent() {
+      // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
+      node.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    };
+    var removeEvent = function removeEvent() {
+      node.removeEventListener('scroll', onScroll);
+    };
+    var dispose = listen(key, function (scrollLeft) {
+      node.style.willChange = 'scroll-position';
+      node.scrollLeft = scrollLeft;
+    });
+    addEvent();
+    return function () {
+      removeEvent();
+      dispose();
+    };
+  }, [key, listen, notify]);
+  return nodeRef;
+}
 
 var TableRowManager = /*#__PURE__*/createContext(null);
 if (process.env.NODE_ENV === 'development') {
@@ -632,6 +465,99 @@ function useTableRowManager() {
   return context;
 }
 
+var overflowStylePatterns = /auto|scroll|overlay|hidden/;
+function isElement(node) {
+  if (!(node instanceof Node)) {
+    return false;
+  }
+  var ELEMENT_NODE_TYPE = 1;
+  return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root) {
+  var _el$ownerDocument$def;
+  if (root === void 0) {
+    root = window;
+  }
+  var node = el;
+  while (node !== root && isElement(node)) {
+    if (node === document.body) {
+      return root;
+    }
+    var _window$getComputedSt = window.getComputedStyle(node),
+      overflow = _window$getComputedSt.overflow,
+      overflowY = _window$getComputedSt.overflowY,
+      overflowX = _window$getComputedSt.overflowX;
+    if (overflowStylePatterns.test(overflow + overflowY + overflowX)) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return (_el$ownerDocument$def = el.ownerDocument.defaultView) != null ? _el$ownerDocument$def : window;
+}
+function isWindow(arg) {
+  return Object.prototype.toString.call(arg) === '[object Window]';
+}
+function isDocument(arg) {
+  return Object.prototype.toString.call(arg) === '[object HTMLDocument]';
+}
+function isRoot(arg) {
+  return Object.prototype.toString.call(arg) === '[object HTMLHtmlElement]';
+}
+function getScrollElement(el) {
+  if (isDocument(el)) {
+    return el.scrollingElement;
+  }
+  if (isElement(el)) {
+    return el;
+  }
+  return document.scrollingElement;
+}
+function getScrollTop(node) {
+  var result = 0;
+  if (isWindow(node) || isRoot(node)) {
+    result = window.scrollY;
+  } else {
+    var element = getScrollElement(node);
+    result = element.scrollTop;
+  }
+  return result;
+}
+function getRelativeOffsetTop(el, ancestor) {
+  var elRect = el.getBoundingClientRect();
+  var ancestorRect = ancestor.getBoundingClientRect();
+  var ancestorBorderTop = Number.parseFloat(window.getComputedStyle(ancestor).borderTopWidth) || 0;
+  var ancestorScrollTop = ancestor.scrollTop;
+  return elRect.top - ancestorRect.top - ancestorBorderTop + ancestorScrollTop;
+}
+
+function onResize(target, callback) {
+  if (isWindow(target)) {
+    var listener = function listener() {
+      callback({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    listener();
+    window.addEventListener('resize', listener);
+    return function () {
+      window.removeEventListener('resize', listener);
+    };
+  } else {
+    var observer = new ResizeObserver(function (entries) {
+      var rect = entries[0].contentRect;
+      callback({
+        width: rect.width,
+        height: rect.height
+      });
+    });
+    observer.observe(target);
+    return function () {
+      observer.disconnect();
+    };
+  }
+}
+
 function anchorQuery$1(rects, scrollTop) {
   var left = 0;
   var right = rects.length - 1;
@@ -1207,6 +1133,7 @@ function TableBody(props) {
     bodyRef = props.bodyRef,
     className = props.className,
     style = props.style,
+    defaultColumnWidth = props.defaultColumnWidth,
     rawData = props.dataSource,
     columnDescriptor = props.columns,
     rowKey = props.rowKey,
@@ -1297,8 +1224,6 @@ function TableBody(props) {
     columnDescriptor: descriptor,
     startRowIndex: startIndex
   });
-  var _useColumnSizes = useColumnSizes(),
-    setWidthList = _useColumnSizes.setWidthList;
   var tableNode = pipelineRender(jsxs("table", {
     className: clsx(className, 'virtual-table-body'),
     style: _extends({}, style, {
@@ -1308,38 +1233,14 @@ function TableBody(props) {
     ref: bodyRootRef,
     children: [jsx(Colgroup$1, {
       columns: descriptor,
-      onColumnSizesMeasure: setWidthList
+      defaultColumnWidth: defaultColumnWidth
     }), bodyNode]
   }), renderBodyRoot, {
     columns: columns,
     columnDescriptor: descriptor,
     startRowIndex: startIndex
   });
-  var _useHorizontalScrollC = useHorizontalScrollContext(),
-    listen = _useHorizontalScrollC.listen,
-    notify = _useHorizontalScrollC.notify;
-  var wrapperRef = useRef(null);
-  useEffect(function () {
-    var node = wrapperRef.current;
-    if (node == null) return;
-    var key = 'virtual-table-body';
-    var onScroll = function onScroll() {
-      notify(key, {
-        scrollLeft: function scrollLeft() {
-          return node.scrollLeft;
-        },
-        node: node
-      });
-    };
-    var dispose = listen(key, function (scrollLeft) {
-      node.scrollLeft = scrollLeft;
-    });
-    node.addEventListener('scroll', onScroll);
-    return function () {
-      node.removeEventListener('scroll', onScroll);
-      dispose();
-    };
-  }, [listen, notify]);
+  var wrapperRef = useScrollSynchronize('virtual-table-body');
   var mergedRef = useMergedRef(wrapperRef, bodyWrapperRef);
   // 滚动到指定行。注意：如果 estimatedRowHeight 不够准确时，不一定能准确滚动到目标位置
   instance.extend({
@@ -1398,6 +1299,7 @@ var _excluded = ["className", "style"];
 var TableHeader = function TableHeader(props) {
   var className = props.className,
     style = props.style,
+    defaultColumnWidth = props.defaultColumnWidth,
     wrapperRef = props.wrapperRef,
     columnDescriptor = props.columns,
     stickyHeader = props.stickyHeader,
@@ -1425,31 +1327,7 @@ var TableHeader = function TableHeader(props) {
     }
     return isValidFixedRight(x.column.fixed);
   });
-  var _useHorizontalScrollC = useHorizontalScrollContext(),
-    listen = _useHorizontalScrollC.listen,
-    notify = _useHorizontalScrollC.notify;
-  var headerWrapperRef = useRef(null);
-  useEffect(function () {
-    var node = headerWrapperRef.current;
-    if (node == null) return;
-    var key = 'virtual-table-header';
-    var onScroll = function onScroll() {
-      notify(key, {
-        scrollLeft: function scrollLeft() {
-          return node.scrollLeft;
-        },
-        node: node
-      });
-    };
-    var dispose = listen(key, function (scrollLeft) {
-      node.scrollLeft = scrollLeft;
-    });
-    node.addEventListener('scroll', onScroll);
-    return function () {
-      node.removeEventListener('scroll', onScroll);
-      dispose();
-    };
-  }, [listen, notify]);
+  var headerWrapperRef = useScrollSynchronize('virtual-table-header');
   var row = pipelineRender(jsx("tr", {
     children: descriptor.map(function (item, index) {
       var _column$onHeaderCell;
@@ -1500,7 +1378,8 @@ var TableHeader = function TableHeader(props) {
   var tableNode = pipelineRender(jsxs("table", {
     style: style,
     children: [jsx(Colgroup$1, {
-      columns: descriptor
+      columns: descriptor,
+      defaultColumnWidth: defaultColumnWidth
     }), theadNode]
   }), renderHeaderRoot, {
     columns: columns,
@@ -1523,6 +1402,83 @@ var TableHeader = function TableHeader(props) {
 };
 var TableHeader$1 = /*#__PURE__*/memo(TableHeader);
 
+function useCalcSize(options) {
+  var getScroller = options.getScroller,
+    root = options.root;
+  var _useState = useState(0),
+    scrollContainerWidth = _useState[0],
+    setScrollContainerWidth = _useState[1];
+  var _useState2 = useState(0),
+    scrollContainerHeight = _useState2[0],
+    setScrollContainerHeight = _useState2[1];
+  var _useState3 = useState(800),
+    tableWidth = _useState3[0],
+    setTableWidth = _useState3[1]; // 设置一个默认值（因为这两个默认值很快就会被覆盖）
+  var _useState4 = useState(600),
+    tableHeight = _useState4[0],
+    setTableHeight = _useState4[1]; // 设置一个默认值（因为这两个默认值很快就会被覆盖）
+  var scrollerContainerRef = useRef(null);
+  useLayoutEffect(function () {
+    var scrollerContainer = getScroller();
+    if (scrollerContainer == null) return;
+    var scroller;
+    if (isWindow(scrollerContainer)) {
+      scroller = document.scrollingElement;
+    } else {
+      scroller = scrollerContainer;
+    }
+    scrollerContainerRef.current = scroller;
+    var observer = new ResizeObserver(function (entries) {
+      var _entries$0$contentRec = entries[0].contentRect,
+        width = _entries$0$contentRec.width,
+        height = _entries$0$contentRec.height;
+      setScrollContainerWidth(width);
+      setScrollContainerHeight(height);
+    });
+    observer.observe(scroller);
+    return function () {
+      observer.disconnect();
+    };
+  }, [getScroller]);
+  useLayoutEffect(function () {
+    var node = root.current;
+    if (node == null) return;
+    var observer = new ResizeObserver(function (entries) {
+      var _entries$0$contentRec2 = entries[0].contentRect,
+        width = _entries$0$contentRec2.width,
+        height = _entries$0$contentRec2.height;
+      setTableWidth(width);
+      setTableHeight(height);
+    });
+    observer.observe(node);
+    return function () {
+      observer.disconnect();
+    };
+  }, [root]);
+  var state = useMemo(function () {
+    return {
+      scrollContainerWidth: scrollContainerWidth,
+      scrollContainerHeight: scrollContainerHeight,
+      tableWidth: tableWidth,
+      tableHeight: tableHeight
+    };
+  }, [scrollContainerWidth, scrollContainerHeight, tableWidth, tableHeight]);
+  return state;
+}
+
+function useCollectColumnWidth(columns, defaultColumnWidth) {
+  var widths = useMemo(function () {
+    return columns.reduce(function (result, column) {
+      var width = getColumnWidth(column, defaultColumnWidth);
+      result.set(getKey(column), width);
+      return result;
+    }, new Map());
+  }, [columns, defaultColumnWidth]);
+  return useShallowMemo(function () {
+    return widths;
+  });
+}
+
 function anchorQuery(rects, scrollLeft) {
   var left = 0;
   var right = rects.length - 1;
@@ -1563,8 +1519,8 @@ function useColumnVirtualize(options) {
     defaultColumnWidth = options.defaultColumnWidth,
     overscan = options.overscan,
     rawColumns = options.columns,
+    containerWidth = options.containerWidth,
     bodyWrapper = options.bodyWrapper,
-    columnWidths = options.columnWidths,
     _options$disabled = options.disabled,
     disabled = _options$disabled === void 0 ? false : _options$disabled;
   var lastFixedLeftIndex = findLastFixedLeftIndex(rawColumns);
@@ -1583,9 +1539,7 @@ function useColumnVirtualize(options) {
     }
     var left = 0;
     return rawColumns.map(function (column, index) {
-      var _columnWidths$get;
-      var key = getKey(column);
-      var width = (_columnWidths$get = columnWidths.get(key)) != null ? _columnWidths$get : estimateSize;
+      var width = getColumnWidth(column, defaultColumnWidth);
       var right = left + width;
       var rect = {
         index: index,
@@ -1596,7 +1550,7 @@ function useColumnVirtualize(options) {
       left = right;
       return rect;
     });
-  }, [rawColumns, columnWidths, estimateSize, disabled]);
+  }, [disabled, rawColumns, defaultColumnWidth]);
   // 锚点元素
   var anchorRef = useRef({
     index: 0,
@@ -1621,7 +1575,6 @@ function useColumnVirtualize(options) {
     if (disabled) return;
     var scrollContainer = bodyWrapper.current;
     if (scrollContainer == null) return;
-    var containerWidth = scrollContainer.offsetWidth;
     var count = Math.ceil(containerWidth / estimateSize);
     var onScroll = function onScroll() {
       var scrollLeft = scrollContainer.scrollLeft;
@@ -1654,7 +1607,7 @@ function useColumnVirtualize(options) {
       scrollContainer.removeEventListener('scroll', onScroll);
       stop();
     };
-  }, [bodyWrapper, estimateSize, updateBoundary, overscan, findAnchorRef, disabled]);
+  }, [containerWidth, bodyWrapper, estimateSize, updateBoundary, overscan, findAnchorRef, disabled]);
   var sum = function sum(startIndex, endIndex) {
     return rects.slice(startIndex, endIndex).reduce(function (a, b) {
       return a + b.width;
@@ -1838,7 +1791,12 @@ function VirtualTableCore(props, ref) {
   var instance = useTableInstance(rawInstance);
   instance.extend({
     getCurrentProps: function getCurrentProps() {
-      return props;
+      return _extends({
+        estimatedRowHeight: estimatedRowHeight,
+        overscanRows: overscanRows,
+        overscanColumns: overscanColumns,
+        defaultColumnWidth: defaultColumnWidth
+      }, props);
     }
   });
   var rootNode = useRef(null);
@@ -1867,6 +1825,10 @@ function VirtualTableCore(props, ref) {
     }
     return getRelativeOffsetTop(root, scrollContainer);
   }, [getOffsetTopImpl, getScroller]);
+  var containerSize = useCalcSize({
+    getScroller: getScroller,
+    root: rootNode
+  });
   var _pipeline$use = pipeline.use({
       dataSource: rawData,
       rowKey: rawRowKey,
@@ -1908,41 +1870,27 @@ function VirtualTableCore(props, ref) {
       return dataSource;
     }
   });
-  var _useState = useState(function () {
-      return new Map();
-    }),
-    columnWidths = _useState[0],
-    setColumnWidths = _useState[1];
-  var columnWidthsRef = useRef(columnWidths);
-  var updateColumnWidths = useCallback(function (value) {
-    var result = new Map(columnWidthsRef.current);
-    value.forEach(function (width, key) {
-      result.set(key, width);
-    });
-    columnWidthsRef.current = result;
-    setColumnWidths(result);
-  }, []);
+  var columnWidths = useCollectColumnWidth(pipelineColumns, defaultColumnWidth);
   instance.extend({
     getColumnWidths: function getColumnWidths() {
-      return columnWidthsRef.current;
+      return columnWidths;
     },
     getColumnWidthByKey: function getColumnWidthByKey(columnKey) {
-      return columnWidthsRef.current.get(columnKey);
+      return columnWidths.get(columnKey);
     }
   });
   var tableColumnsContext = useMemo(function () {
     return {
-      widthList: columnWidths,
-      setWidthList: updateColumnWidths
+      widthList: columnWidths
     };
-  }, [columnWidths, updateColumnWidths]);
+  }, [columnWidths]);
   var _useColumnVirtualize = useColumnVirtualize({
       estimateSize: estimatedColumnWidth != null ? estimatedColumnWidth : defaultColumnWidth,
       defaultColumnWidth: defaultColumnWidth,
       overscan: overscanColumns,
       columns: pipelineColumns,
+      containerWidth: containerSize.tableWidth,
       bodyWrapper: bodyWrapperRef,
-      columnWidths: columnWidths,
       disabled: estimatedColumnWidth == null
     }),
     columns = _useColumnVirtualize.columns;
@@ -2014,11 +1962,10 @@ function VirtualTableCore(props, ref) {
       // pipelineColumns 是一个经过中间件处理的 columns
       // 因为中间件可能会处理 columns，比如：添加、删除、排序 columns
       for (var _iterator = _createForOfIteratorHelperLoose(pipelineColumns), _step; !(_step = _iterator()).done;) {
-        var _columnWidths$get;
-        var element = _step.value;
-        var columnKey = getKey(element);
-        var width = (_columnWidths$get = columnWidths.get(columnKey)) != null ? _columnWidths$get : 0;
-        if (isValidFixedLeft(element.fixed)) {
+        var column = _step.value;
+        var columnKey = getKey(column);
+        var width = getColumnWidth(column, defaultColumnWidth);
+        if (isValidFixedLeft(column.fixed)) {
           leftFixedWidth += width;
         }
         if (columnKey === key) {
@@ -2052,6 +1999,7 @@ function VirtualTableCore(props, ref) {
   var contentNode = pipelineRender(jsxs(Fragment$1, {
     children: [jsx(TableHeader$1, {
       wrapperRef: headerWrapperRef,
+      defaultColumnWidth: defaultColumnWidth,
       columns: headerColumns,
       stickyHeader: stickyHeader,
       renderHeaderWrapper: renderHeaderWrapper,
@@ -2066,6 +2014,7 @@ function VirtualTableCore(props, ref) {
       bodyRef: bodyRef,
       className: tableBodyClassName,
       style: tableBodyStyle,
+      defaultColumnWidth: defaultColumnWidth,
       columns: columns,
       rowKey: rowKey,
       dataSource: dataSource,
@@ -2104,9 +2053,8 @@ function VirtualTableCore(props, ref) {
     value: tableColumnsContext,
     children: jsx(StickyContext, {
       columns: pipelineColumns,
-      children: jsx(ContainerSizeContext, {
-        getScroller: getScroller,
-        root: rootNode,
+      children: jsx(ContainerSize.Provider, {
+        value: containerSize,
         children: jsx(HorizontalScrollContext, {
           children: table
         })
@@ -2119,5 +2067,5 @@ if (process.env.NODE_ENV === 'development') {
 }
 var table = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(VirtualTableCore));
 
-export { Colgroup$1 as Colgroup, NormalRowHeightKey, table as VirtualTable, Cell$1 as VirtualTableCell, Row$1 as VirtualTableRow, createMiddleware, findLastIndex, getKey, getRelativeOffsetTop, getRowKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTableInstance, useTablePipeline, useTableRowManager, useTableSticky };
+export { Colgroup$1 as Colgroup, NormalRowHeightKey, table as VirtualTable, Cell$1 as VirtualTableCell, Row$1 as VirtualTableRow, createMiddleware, findLastIndex, getColumnWidth, getKey, getRelativeOffsetTop, getRowKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useScrollSynchronize, useShallowMemo, useStableFn, useTableInstance, useTablePipeline, useTableRowManager, useTableSticky };
 //# sourceMappingURL=index.esm.js.map