@are-visual/virtual-table 0.0.1 → 0.1.0

package/index.esm.js

@@ -288,22 +288,31 @@ var Cell$1 = /*#__PURE__*/memo(Cell);
 
 var Colgroup = function Colgroup(props) {
   var columns = props.columns,
-    colRef = props.colRef;
+    onColumnSizesMeasure = props.onColumnSizesMeasure;
+  var enableMeasure = onColumnSizesMeasure != null;
+  var columnSizes = useRef(new Map());
   return jsx("colgroup", {
-    children: columns.map(function (item, index) {
+    ref: function ref() {
+      if (!enableMeasure) return;
+      onColumnSizesMeasure(columnSizes.current);
+    },
+    children: columns.map(function (item) {
       var key = item.key;
       if (item.type === 'blank') {
         return jsx("col", {
+          className: "blank",
           style: {
-            width: item.width
+            width: item.width,
+            color: '#f00'
           }
         }, key);
       }
       var column = item.column;
       return jsx("col", {
-        ref: typeof colRef === 'function' ? function (instance) {
-          colRef(instance, column, index);
-        } : colRef,
+        ref: function ref(node) {
+          if (node == null || !enableMeasure) return;
+          columnSizes.current.set(key, node.offsetWidth);
+        },
         style: {
           width: column.width,
           minWidth: column.minWidth
@@ -464,25 +473,34 @@ function HorizontalScrollContext(props) {
   var children = props.children;
   var listenerMap = useRef(new Map());
   var context = useMemo(function () {
+    var skipEvent = new Set();
     return {
       listen: function listen(key, listener) {
-        listenerMap.current.set(key, listener);
+        listenerMap.current.set(key, function (scrollLeft, node) {
+          listener(scrollLeft, node);
+        });
         return function () {
           listenerMap.current["delete"](key);
         };
       },
-      notify: function notify(key, scrollLeft, node) {
+      notify: function notify(key, options) {
+        if (skipEvent.has(key)) {
+          skipEvent["delete"](key);
+          return;
+        }
+        var scrollLeft = options.scrollLeft,
+          node = options.node;
         var rAF = window.requestAnimationFrame;
         if (rAF == null) {
           rAF = function rAF(fn) {
             fn();
           };
         }
-        rAF(function () {
-          listenerMap.current.forEach(function (listener, itemKey) {
-            if (itemKey !== key) {
-              listener(scrollLeft, node);
-            }
+        listenerMap.current.forEach(function (listener, itemKey) {
+          if (key === itemKey) return;
+          skipEvent.add(itemKey);
+          rAF(function () {
+            listener(scrollLeft(), node);
           });
         });
       }
@@ -518,7 +536,7 @@ function useStableFn(callback) {
   var fn = useRef(null);
   useLayoutEffect(function () {
     fn.current = callback;
-  }, [callback]);
+  });
   var stableFn = useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -754,7 +772,7 @@ function Row(props) {
     ref: function ref(node) {
       if (node == null) return;
       // 小心陷阱：当 table 父元素为 display: none 时，依然会触发 updateRowHeight 函数，并设置高度为 0
-      updateRowHeight(rowIndex, node.offsetHeight);
+      updateRowHeight(rowIndex, rowIndex, node.offsetHeight);
     },
     children: descriptor.map(function (item, index) {
       var key = item.key;
@@ -804,16 +822,230 @@ function useMergedRef() {
   return useCallback(mergeRefs.apply(undefined, refs), refs);
 }
 
+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;
+  var index = -1;
+  while (left <= right) {
+    var mid = Math.floor((left + right) / 2);
+    if (rects[mid].bottom > scrollTop) {
+      index = mid;
+      right = mid - 1;
+    } else {
+      left = mid + 1;
+    }
+  }
+  if (index === -1) {
+    return undefined;
+  }
+  return rects[index];
+}
+function useRowVirtualize(options) {
+  var getOffsetTop = options.getOffsetTop,
+    rawData = options.dataSource,
+    getScroller = options.getScroller,
+    estimateSize = options.estimateSize,
+    overscan = options.overscan;
+  var _useState = useState(0),
+    startIndex = _useState[0],
+    setStartIndex = _useState[1];
+  var _useState2 = useState(0),
+    endIndex = _useState2[0],
+    setEndIndex = _useState2[1];
+  var dataSlice = useMemo(function () {
+    return rawData.slice(startIndex, endIndex);
+  }, [rawData, startIndex, endIndex]);
+  // 行高信息（先填充预估高度，DOM渲染后再更新成实际高度）
+  var rowHeights = useRef([]);
+  var fillRowHeights = function fillRowHeights() {
+    var len = rawData.length;
+    for (var i = 0; i < len; i++) {
+      var target = rowHeights.current[i];
+      // 由于 fillRowHeights 是在渲染阶段调用，防止重复渲染时 estimateSize 覆盖了真实 DOM 的高度
+      if (target == null) {
+        rowHeights.current[i] = estimateSize;
+      }
+    }
+    rowHeights.current = rowHeights.current.slice(0, len);
+  };
+  fillRowHeights();
+  // 布局信息（也就是锚点元素需要的信息，top,bottom,height,index）
+  var rowRects = useRef([]);
+  var updateRowRectList = function updateRowRectList(shouldSkip) {
+    if (shouldSkip === undefined) {
+      shouldSkip = false;
+    }
+    if (shouldSkip && rowRects.current.length > 0) {
+      return;
+    }
+    var _rowHeights$current$r = rowHeights.current.reduce(function (result, height, index) {
+        var nextTop = result.top + height;
+        result.rects.push({
+          index: index,
+          top: result.top,
+          height: height,
+          bottom: nextTop
+        });
+        result.top = nextTop;
+        return result;
+      }, {
+        top: 0,
+        rects: []
+      }),
+      rects = _rowHeights$current$r.rects;
+    rowRects.current = rects;
+  };
+  var setRowHeight = function setRowHeight(index, height) {
+    rowHeights.current[index] = height;
+  };
+  // 锚点元素，当前虚拟列表中，最接近滚动容器顶部的元素
+  var anchorRef = useRef({
+    index: 0,
+    height: estimateSize,
+    top: 0,
+    bottom: estimateSize
+  });
+  // 用来判断滚动方向
+  var scrollTopRef = useRef(0);
+  var initial = useRef(false);
+  useEffect(function () {
+    var container = getScroller();
+    if (container == null) return;
+    var count = 0;
+    var getScrollTop = function getScrollTop() {
+      var offsetTop = getOffsetTop();
+      var result = 0;
+      if (isWindow(container) || isRoot(container)) {
+        result = window.scrollY;
+      } else {
+        var element = getScrollElement(container);
+        result = element.scrollTop;
+      }
+      return Math.max(result - offsetTop, 0);
+    };
+    var calcCount = function calcCount(scrollerContainerHeight) {
+      var prevCount = count;
+      count = Math.ceil(scrollerContainerHeight / estimateSize);
+      return {
+        prevCount: prevCount
+      };
+    };
+    var updateBoundary = function updateBoundary(scrollTop) {
+      var anchor = anchorQuery$1(rowRects.current, scrollTop);
+      if (anchor != null) {
+        anchorRef.current = anchor;
+        setStartIndex(Math.max(0, anchor.index - overscan));
+        setEndIndex(anchor.index + count + overscan);
+      }
+    };
+    var onScroll = function onScroll(e) {
+      var offsetTop = getOffsetTop();
+      var scrollElement = getScrollElement(e.target);
+      var scrollTop = Math.max(0, scrollElement.scrollTop - offsetTop);
+      // 是否为向下滚动
+      var isScrollDown = scrollTop > scrollTopRef.current;
+      if (isScrollDown) {
+        // 如果滚动距离比较小，没有超出锚点元素的边界，就不需要计算 startIndex、endIndex 了
+        if (scrollTop > anchorRef.current.bottom) {
+          updateBoundary(scrollTop);
+        }
+      } else {
+        if (scrollTop < anchorRef.current.top) {
+          updateBoundary(scrollTop);
+        }
+      }
+      scrollTopRef.current = scrollTop;
+    };
+    var prevHeight = 0;
+    var stopListen = onResize(container, function (rect) {
+      // 处理父元素 display:none 容器高度丢失，导致显示 row 不准确
+      if (rect.height === prevHeight || rect.height === 0) {
+        return;
+      }
+      prevHeight = rect.height;
+      calcCount(rect.height);
+      var scrollTop = getScrollTop();
+      if (!initial.current) {
+        initial.current = true;
+        var nextStartIndex = 0;
+        // 判断一下当前滚动位置，计算 startIndex（场景：SPA 页面切换且渲染非异步数据）
+        if (scrollTop >= estimateSize) {
+          nextStartIndex = Math.max(Math.floor(scrollTop / estimateSize) - 1 - overscan, 0);
+        }
+        var nextEndIndex = nextStartIndex + count + overscan;
+        setStartIndex(nextStartIndex);
+        setEndIndex(nextEndIndex);
+      } else {
+        updateBoundary(scrollTop);
+      }
+    });
+    container.addEventListener('scroll', onScroll);
+    return function () {
+      stopListen();
+      container.removeEventListener('scroll', onScroll);
+    };
+  }, [estimateSize, getOffsetTop, getScroller, overscan]);
+  var sum = function sum(startIndex, endIndex) {
+    return rowHeights.current.slice(startIndex, endIndex).reduce(function (a, b) {
+      return a + b;
+    }, 0);
+  };
+  // TODO: React Compiler 测试 topBlank 和 bottomBlank
+  var topBlank = sum(0, startIndex);
+  var bottomBlank = sum(endIndex);
+  return {
+    startIndex: startIndex,
+    endIndex: endIndex,
+    rowHeightList: rowHeights,
+    updateRowRectList: updateRowRectList,
+    setRowHeight: setRowHeight,
+    topBlank: topBlank,
+    bottomBlank: bottomBlank,
+    dataSlice: dataSlice
+  };
+}
+
 function TableBody(props) {
   var bodyWrapperRef = props.bodyWrapperRef,
     bodyRootRef = props.bodyRootRef,
     bodyRef = props.bodyRef,
     className = props.className,
     style = props.style,
-    dataSource = props.dataSource,
+    rawData = props.dataSource,
     columnDescriptor = props.columns,
     rowKey = props.rowKey,
-    startIndex = props.startIndex,
+    overscan = props.overscan,
+    estimateSize = props.estimateSize,
+    getScroller = props.getScroller,
+    getOffsetTop = props.getOffsetTop,
     rowClassName = props.rowClassName,
     onRow = props.onRow,
     renderBodyWrapper = props.renderBodyWrapper,
@@ -821,23 +1053,53 @@ function TableBody(props) {
     renderBody = props.renderBody,
     renderRow = props.renderRow,
     renderCell = props.renderCell;
+  var _useRowVirtualize = useRowVirtualize({
+      getOffsetTop: getOffsetTop,
+      dataSource: rawData,
+      getScroller: getScroller,
+      estimateSize: estimateSize,
+      overscan: overscan
+    }),
+    startIndex = _useRowVirtualize.startIndex,
+    dataSource = _useRowVirtualize.dataSlice,
+    setRowHeight = _useRowVirtualize.setRowHeight,
+    updateRowRectList = _useRowVirtualize.updateRowRectList,
+    rowHeightList = _useRowVirtualize.rowHeightList,
+    topBlank = _useRowVirtualize.topBlank,
+    bottomBlank = _useRowVirtualize.bottomBlank;
+  var rowHeights = useRef(new Map());
+  var updateRowHeight = useCallback(function (index, key, height) {
+    var _rowHeights$current$g;
+    var target = (_rowHeights$current$g = rowHeights.current.get(index)) != null ? _rowHeights$current$g : new Map();
+    target.set(key, height);
+    rowHeights.current.set(index, target);
+  }, []);
+  var rowManageState = useMemo(function () {
+    return {
+      updateRowHeight: updateRowHeight,
+      getRowHeightList: function getRowHeightList() {
+        return rowHeightList.current;
+      }
+    };
+  }, [rowHeightList, updateRowHeight]);
   var columns = columnDescriptor.columns,
     descriptor = columnDescriptor.descriptor;
-  var _useHorizontalScrollC = useHorizontalScrollContext(),
-    listen = _useHorizontalScrollC.listen,
-    notify = _useHorizontalScrollC.notify;
-  var _useColumnSizes = useColumnSizes(),
-    widthList = _useColumnSizes.widthList,
-    setWidthList = _useColumnSizes.setWidthList;
-  var columnWidthsRef = useRef(new Map());
-  useLayoutEffect(function () {
-    var snap = widthList;
-    if (!isShallowEqual(snap, columnWidthsRef.current)) {
-      setWidthList(new Map(columnWidthsRef.current));
-    }
+  var tbodyRef = useMergedRef(bodyRef, function (elm) {
+    if (elm == null) return;
+    var bodyHeight = elm.offsetHeight;
+    if (bodyHeight === 0) return;
+    var heights = rowHeights.current;
+    heights.forEach(function (row, rowIndex) {
+      var height = [].concat(row.values()).reduce(function (res, x) {
+        return res + x;
+      }, 0);
+      setRowHeight(rowIndex, height);
+    });
+    updateRowRectList();
+    rowHeights.current.clear();
   });
   var bodyNode = pipelineRender(jsx("tbody", {
-    ref: bodyRef,
+    ref: tbodyRef,
     children: dataSource.map(function (e, rowIndex) {
       var _rowKey = e[rowKey];
       return jsx(Row$1, {
@@ -854,30 +1116,44 @@ function TableBody(props) {
     columns: columns,
     columnDescriptor: descriptor
   });
+  var _useColumnSizes = useColumnSizes(),
+    widthList = _useColumnSizes.widthList,
+    setWidthList = _useColumnSizes.setWidthList;
+  var onColumnSizesMeasure = useCallback(function (columnSizes) {
+    if (!isShallowEqual(widthList, columnSizes)) {
+      setWidthList(new Map(columnSizes));
+    }
+  }, [setWidthList, widthList]);
   var tableNode = pipelineRender(jsxs("table", {
     className: clsx(className, 'virtual-table-body'),
-    style: style,
+    style: _extends({}, style, {
+      paddingBottom: bottomBlank,
+      paddingTop: topBlank
+    }),
     ref: bodyRootRef,
     children: [jsx(Colgroup, {
       columns: descriptor,
-      colRef: function colRef(node, column) {
-        if (node == null) return;
-        var key = getKey(column);
-        columnWidthsRef.current.set(key, node.offsetWidth);
-      }
+      onColumnSizesMeasure: onColumnSizesMeasure
     }), bodyNode]
   }), renderBodyRoot, {
     columns: columns,
     columnDescriptor: descriptor
   });
+  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() {
-      var nextScrollLeft = node.scrollLeft;
-      notify(key, nextScrollLeft, node);
+      notify(key, {
+        scrollLeft: function scrollLeft() {
+          return node.scrollLeft;
+        },
+        node: node
+      });
     };
     var dispose = listen(key, function (scrollLeft) {
       node.scrollLeft = scrollLeft;
@@ -889,13 +1165,16 @@ function TableBody(props) {
     };
   }, [listen, notify]);
   var mergedRef = useMergedRef(wrapperRef, bodyWrapperRef);
-  return pipelineRender(jsx("div", {
-    ref: mergedRef,
-    className: "virtual-table-body-wrapper",
-    children: tableNode
-  }), renderBodyWrapper, {
-    columns: columns,
-    columnDescriptor: descriptor
+  return jsx(TableRowManager.Provider, {
+    value: rowManageState,
+    children: pipelineRender(jsx("div", {
+      ref: mergedRef,
+      className: "virtual-table-body-wrapper",
+      children: tableNode
+    }), renderBodyWrapper, {
+      columns: columns,
+      columnDescriptor: descriptor
+    })
   });
 }
 
@@ -913,6 +1192,7 @@ var TableHeader = function TableHeader(props) {
     renderHeaderCell = props.renderHeaderCell;
   var columns = columnDescriptor.columns,
     descriptor = columnDescriptor.descriptor;
+  var lastColumn = columns[columns.length - 1];
   var _useColumnSizes = useColumnSizes(),
     widthList = _useColumnSizes.widthList;
   var _useTableSticky = useTableSticky(),
@@ -938,8 +1218,12 @@ var TableHeader = function TableHeader(props) {
     if (node == null) return;
     var key = 'virtual-table-header';
     var onScroll = function onScroll() {
-      var nextScrollLeft = node.scrollLeft;
-      notify(key, nextScrollLeft, node);
+      notify(key, {
+        scrollLeft: function scrollLeft() {
+          return node.scrollLeft;
+        },
+        node: node
+      });
     };
     var dispose = listen(key, function (scrollLeft) {
       node.scrollLeft = scrollLeft;
@@ -955,12 +1239,15 @@ var TableHeader = function TableHeader(props) {
       var _column$onHeaderCell;
       var key = item.key;
       if (item.type === 'blank') {
-        return jsx("th", {}, key);
+        return jsx("th", {
+          "data-blank": true
+        }, key);
       }
       var column = item.column;
       if (column.colSpan === 0) {
         return null;
       }
+      var isLast = getKey(lastColumn) === key;
       var _ref = (_column$onHeaderCell = column.onHeaderCell == null ? undefined : column.onHeaderCell(column, index)) != null ? _column$onHeaderCell : {},
         thClassName = _ref.className,
         thStyle = _ref.style,
@@ -970,7 +1257,7 @@ var TableHeader = function TableHeader(props) {
           scope: 'col'
         }, rest, {
           colSpan: column.colSpan,
-          className: clsx('virtual-table-header-cell', column.align != null && "virtual-table-align-" + column.align, isValidFixed(column.fixed) && 'virtual-table-sticky-cell', lastFixedLeftColumnIndex === index && 'virtual-table-cell-fix-left-last', firstFixedRightColumnIndex === index && 'virtual-table-cell-fix-right-first', column.className, thClassName),
+          className: clsx('virtual-table-header-cell', isLast && 'no-split', column.align != null && "virtual-table-align-" + column.align, isValidFixed(column.fixed) && 'virtual-table-sticky-cell', lastFixedLeftColumnIndex === index && 'virtual-table-cell-fix-left-last', firstFixedRightColumnIndex === index && 'virtual-table-cell-fix-right-first', column.className, thClassName),
           style: _extends({}, thStyle, {
             left: isValidFixedLeft(column.fixed) ? stickySizes.get(key) : undefined,
             right: isValidFixedRight(column.fixed) ? stickySizes.get(key) : undefined
@@ -1019,35 +1306,7 @@ var TableHeader = function TableHeader(props) {
   });
 };
 
-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, scrollLeft) {
+function anchorQuery(rects, scrollLeft) {
   var left = 0;
   var right = rects.length - 1;
   var index = -1;
@@ -1128,7 +1387,7 @@ function useColumnVirtualize(options) {
     right: estimateSize
   });
   var findAnchorRef = useStableFn(function (scrollLeft) {
-    return anchorQuery$1(rects, scrollLeft);
+    return anchorQuery(rects, scrollLeft);
   });
   var updateBoundary = useStableFn(function (scrollLeft, count) {
     var anchor = findAnchorRef(scrollLeft);
@@ -1204,34 +1463,56 @@ function useColumnVirtualize(options) {
     });
   }, [disabled, rawColumns, startIndex, endIndex, lastFixedLeftIndex, firstFixedRightIndex]);
   var descriptor = useMemo(function () {
-    return columnSlice.reduce(function (result, column) {
+    return columnSlice.reduce(function (result, column, index) {
       var key = getKey(column);
       if (key === leftKey) {
         result.push({
-          key: key,
           type: 'normal',
+          key: key,
           column: column
         });
         result.push({
+          type: 'blank',
           key: '_blank_left',
+          width: leftBlank
+        });
+      } else if (leftKey == null && index === 0) {
+        result.push({
           type: 'blank',
+          key: '_blank_left',
           width: leftBlank
         });
+        result.push({
+          type: 'normal',
+          key: key,
+          column: column
+        });
       } else if (key === rightKey) {
         result.push({
-          key: '_blank_right',
           type: 'blank',
+          key: '_blank_right',
           width: rightBlank
         });
         result.push({
+          type: 'normal',
           key: key,
+          column: column
+        });
+      } else if (rightKey == null && index === columnSlice.length - 1) {
+        result.push({
           type: 'normal',
+          key: key,
           column: column
         });
+        result.push({
+          type: 'blank',
+          key: '_blank_right',
+          width: rightBlank
+        });
       } else {
         result.push({
-          key: key,
           type: 'normal',
+          key: key,
           column: column
         });
       }
@@ -1252,229 +1533,6 @@ function useColumnVirtualize(options) {
   };
 }
 
-function useRowRectManager(options) {
-  var itemCount = options.itemCount,
-    estimateSize = options.estimateSize,
-    onChange = options.onChange;
-  var rowHeightList = useRef([]);
-  var calc = function calc() {
-    for (var i = 0; i < itemCount; i += 1) {
-      var target = rowHeightList.current[i];
-      if (target == null) {
-        rowHeightList.current[i] = estimateSize;
-      }
-    }
-    rowHeightList.current = rowHeightList.current.slice(0, itemCount);
-  };
-  // eslint-disable-next-line react-compiler/react-compiler
-  calc();
-  // const initialCount = useRef(itemCount)
-  // const [, forceUpdate] = useReducer((x) => !x, false)
-  // useLayoutEffect(() => {
-  //   for (let i = 0; i < itemCount; i += 1) {
-  //     const target = rowHeightList.current[i]
-  //     if (target == null) {
-  //       rowHeightList.current[i] = estimatedRowHeight
-  //     }
-  //   }
-  //   // 数据量骤减时如果 row 数量不匹配则会导致容器高度错误
-  //   rowHeightList.current = rowHeightList.current.slice(0, itemCount)
-  //   // 这里的 useLayoutEffect 是为了在第一次渲染时，根据数据条数预先填充 row 的高度，这样内容足够高，容器才能滚动
-  //   // 但是 dataSource 一般是异步获取的，第一次渲染时，length 是空的，所以无法进行填充，这样可能导致容器不能滚动
-  //   // 所以 dataSource 有数据后，再填充一次，但是因为 useLayoutEffect 是渲染结束后才调用的，此时填充数据还是导致容器不能滚动，
-  //   // 所以，只在第一次 dataSource 不为空时强制触发一次更新
-  //   // 可能正因为这一次强制渲染，所以 VirtualTable 内部很多组件可能多次渲染。尝试优化为 calc 函数
-  //   if (initialCount.current === 0 && itemCount > 0) {
-  //     initialCount.current = itemCount
-  //     forceUpdate()
-  //   }
-  // }, [itemCount, estimatedRowHeight])
-  var rectList = useRef([]);
-  var updateRectList = function updateRectList() {
-    var result = [];
-    var top = 0;
-    rowHeightList.current.forEach(function (item, index) {
-      if (index !== 0) {
-        top += item;
-      }
-      result.push({
-        index: index,
-        height: item,
-        top: top,
-        bottom: top + item
-      });
-    });
-    rectList.current = result;
-  };
-  // DOM 渲染结束后，进行高度测量，再修改 rowHeightList
-  // 小心陷阱：当 table 父元素为 display: none 时，依然会触发 updateRowHeight 函数，并设置高度为 0
-  var updateRowHeight = useStableFn(function (index, height) {
-    rowHeightList.current[index] = height;
-    updateRectList();
-    onChange == null || onChange(index, height, rectList.current);
-  });
-  var sum = function sum(startIndex, endIndex) {
-    return rowHeightList.current.slice(startIndex, endIndex).reduce(function (a, b) {
-      return a + b;
-    }, 0);
-  };
-  return {
-    rowHeightList: rowHeightList,
-    updateRowHeight: updateRowHeight,
-    sum: sum,
-    rects: useCallback(function () {
-      return rectList.current;
-    }, [])
-  };
-}
-
-function anchorQuery(rects, scrollTop) {
-  var left = 0;
-  var right = rects.length - 1;
-  var index = -1;
-  while (left <= right) {
-    var mid = Math.floor((left + right) / 2);
-    if (rects[mid].bottom > scrollTop) {
-      index = mid;
-      right = mid - 1;
-    } else {
-      left = mid + 1;
-    }
-  }
-  if (index === -1) {
-    return undefined;
-  }
-  return rects[index];
-}
-function useRowVirtualize(options) {
-  var getOffsetTop = options.getOffsetTop,
-    rawData = options.dataSource,
-    getScroller = options.getScroller,
-    estimateSize = options.estimateSize,
-    overscan = options.overscan;
-  var _useState = useState(0),
-    startIndex = _useState[0],
-    setStartIndex = _useState[1];
-  var _useState2 = useState(0),
-    endIndex = _useState2[0],
-    setEndIndex = _useState2[1];
-  // 锚点元素，当前虚拟列表中，最接近滚动容器顶部的元素
-  var anchorRef = useRef({
-    index: 0,
-    height: estimateSize,
-    top: 0,
-    bottom: estimateSize
-  });
-  var _useRowRectManager = useRowRectManager({
-      itemCount: rawData.length,
-      estimateSize: estimateSize,
-      onChange: function onChange(index, _height, rowRects) {
-        if (anchorRef.current.index === index) {
-          anchorRef.current = rowRects[index];
-        }
-      }
-    }),
-    rowHeightList = _useRowRectManager.rowHeightList,
-    rects = _useRowRectManager.rects,
-    updateRowHeight = _useRowRectManager.updateRowHeight,
-    sum = _useRowRectManager.sum;
-  // 用来判断滚动方向
-  var scrollTopRef = useRef(0);
-  var initial = useRef(false);
-  useEffect(function () {
-    var container = getScroller();
-    if (container == null) return;
-    var count = 0;
-    var getScrollTop = function getScrollTop() {
-      var offsetTop = getOffsetTop();
-      var result = 0;
-      if (isWindow(container) || isRoot(container)) {
-        result = window.scrollY;
-      } else {
-        var element = getScrollElement(container);
-        result = element.scrollTop;
-      }
-      return Math.max(result - offsetTop, 0);
-    };
-    var calcCount = function calcCount(scrollerContainerHeight) {
-      var prevCount = count;
-      count = Math.ceil(scrollerContainerHeight / estimateSize);
-      return {
-        prevCount: prevCount
-      };
-    };
-    var updateBoundary = function updateBoundary(scrollTop) {
-      var anchor = anchorQuery(rects(), scrollTop);
-      if (anchor != null) {
-        anchorRef.current = anchor;
-        setStartIndex(Math.max(0, anchor.index - overscan));
-        setEndIndex(anchor.index + count + overscan);
-      }
-    };
-    var onScroll = function onScroll(e) {
-      var offsetTop = getOffsetTop();
-      var scrollElement = getScrollElement(e.target);
-      var scrollTop = Math.max(0, scrollElement.scrollTop - offsetTop);
-      // 是否为向下滚动
-      var isScrollDown = scrollTop > scrollTopRef.current;
-      if (isScrollDown) {
-        // 如果滚动距离比较小，没有超出锚点元素的边界，就不需要计算 startIndex、endIndex 了
-        if (scrollTop > anchorRef.current.bottom) {
-          updateBoundary(scrollTop);
-        }
-      } else {
-        if (scrollTop < anchorRef.current.top) {
-          updateBoundary(scrollTop);
-        }
-      }
-      scrollTopRef.current = scrollTop;
-    };
-    var prevHeight = 0;
-    var stopListen = onResize(container, function (rect) {
-      // 处理父元素 display:none 容器高度丢失，导致显示 row 不准确
-      if (rect.height === prevHeight || rect.height === 0) {
-        return;
-      }
-      prevHeight = rect.height;
-      calcCount(rect.height);
-      var scrollTop = getScrollTop();
-      if (!initial.current) {
-        initial.current = true;
-        var nextStartIndex = 0;
-        // 判断一下当前滚动位置，计算 startIndex（场景：SPA 页面切换且渲染非异步数据）
-        if (scrollTop >= estimateSize) {
-          nextStartIndex = Math.max(Math.floor(scrollTop / estimateSize) - 1 - overscan, 0);
-        }
-        var nextEndIndex = nextStartIndex + count + overscan;
-        setStartIndex(nextStartIndex);
-        setEndIndex(nextEndIndex);
-      } else {
-        updateBoundary(scrollTop);
-      }
-    });
-    container.addEventListener('scroll', onScroll);
-    return function () {
-      stopListen();
-      container.removeEventListener('scroll', onScroll);
-    };
-  }, [estimateSize, getOffsetTop, getScroller, overscan, rects]);
-  // TODO: React Compiler 测试 topBlank 和 bottomBlank
-  var topBlank = sum(0, startIndex);
-  var bottomBlank = sum(endIndex);
-  var dataSlice = useMemo(function () {
-    return rawData.slice(startIndex, endIndex);
-  }, [rawData, startIndex, endIndex]);
-  return {
-    startIndex: startIndex,
-    endIndex: endIndex,
-    rowHeightList: rowHeightList,
-    updateRowHeight: updateRowHeight,
-    topBlank: topBlank,
-    bottomBlank: bottomBlank,
-    dataSlice: dataSlice
-  };
-}
-
 function TableRoot(props, ref) {
   var className = props.className,
     style = props.style,
@@ -1549,7 +1607,7 @@ function VirtualTableCore(props, ref) {
     onRow = props.onRow,
     getOffsetTopImpl = props.getOffsetTop,
     _props$virtualHeader = props.virtualHeader,
-    virtualHeader = _props$virtualHeader === undefined ? false : _props$virtualHeader;
+    virtualHeader = _props$virtualHeader === undefined ? true : _props$virtualHeader;
   var rootNode = useRef(null);
   var headerWrapperRef = useRef(null);
   var bodyWrapperRef = useRef(null);
@@ -1624,19 +1682,6 @@ function VirtualTableCore(props, ref) {
       setWidthList: updateColumnWidths
     };
   }, [columnWidths]);
-  var _useRowVirtualize = useRowVirtualize({
-      getOffsetTop: getOffsetTop,
-      dataSource: dataSource,
-      getScroller: getScroller,
-      estimateSize: estimatedRowHeight,
-      overscan: overscanRows
-    }),
-    startIndex = _useRowVirtualize.startIndex,
-    dataSlice = _useRowVirtualize.dataSlice,
-    updateRowHeight = _useRowVirtualize.updateRowHeight,
-    rowHeightList = _useRowVirtualize.rowHeightList,
-    topBlank = _useRowVirtualize.topBlank,
-    bottomBlank = _useRowVirtualize.bottomBlank;
   var _useColumnVirtualize = useColumnVirtualize({
       estimateSize: estimatedColumnWidth != null ? estimatedColumnWidth : 100,
       overscan: overscanColumns,
@@ -1669,14 +1714,6 @@ function VirtualTableCore(props, ref) {
   var hasFixedRightColumn = pipelineColumns.some(function (x) {
     return isValidFixedRight(x.fixed);
   });
-  var rowManager = useMemo(function () {
-    return {
-      getRowHeightList: function getRowHeightList() {
-        return rowHeightList.current;
-      },
-      updateRowHeight: updateRowHeight
-    };
-  }, [rowHeightList, updateRowHeight]);
   var fullHeaderColumns = useMemo(function () {
     return {
       columns: pipelineColumns,
@@ -1711,14 +1748,14 @@ function VirtualTableCore(props, ref) {
       bodyRootRef: mergedBodyRootRef,
       bodyRef: bodyRef,
       className: tableBodyClassName,
-      style: _extends({}, tableBodyStyle, {
-        paddingBottom: bottomBlank,
-        paddingTop: topBlank
-      }),
+      style: tableBodyStyle,
       columns: columns,
       rowKey: rowKey,
-      dataSource: dataSlice,
-      startIndex: startIndex,
+      dataSource: dataSource,
+      overscan: overscanRows,
+      estimateSize: estimatedRowHeight,
+      getScroller: getScroller,
+      getOffsetTop: getOffsetTop,
       rowClassName: onRowClassName,
       onRow: onRowProps,
       renderBodyWrapper: renderBodyWrapper,
@@ -1745,18 +1782,15 @@ function VirtualTableCore(props, ref) {
     columns: columns.columns,
     columnDescriptor: columns.descriptor
   });
-  return jsx(TableRowManager.Provider, {
-    value: rowManager,
-    children: jsx(ColumnSizes.Provider, {
-      value: tableColumnsContext,
-      children: jsx(StickyContext, {
-        columns: pipelineColumns,
-        children: jsx(ContainerSizeContext, {
-          getScroller: getScroller,
-          root: rootNode,
-          children: jsx(HorizontalScrollContext, {
-            children: table
-          })
+  return jsx(ColumnSizes.Provider, {
+    value: tableColumnsContext,
+    children: jsx(StickyContext, {
+      columns: pipelineColumns,
+      children: jsx(ContainerSizeContext, {
+        getScroller: getScroller,
+        root: rootNode,
+        children: jsx(HorizontalScrollContext, {
+          children: table
         })
       })
     })