@are-visual/virtual-table 0.7.0 → 0.9.0

package/index.esm.js

@@ -2,6 +2,28 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useRef, createContext, useContext, useMemo, memo, useState, useLayoutEffect, useCallback, useEffect, Fragment, createElement, forwardRef } from 'react';
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: true
+      } : {
+        done: false,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -20,6 +42,13 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 function shallowEqualObjects(objA, objB) {
   if (objA === objB) {
@@ -559,6 +588,271 @@ function useTableRowManager() {
   return context;
 }
 
+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];
+}
+var NormalRowHeightKey = 'NormalRow';
+function useRowVirtualize(options) {
+  var getOffsetTop = options.getOffsetTop,
+    rowKey = options.rowKey,
+    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]);
+  /**
+   * 记录的所有行高信息
+   * 一个 Row 可能有多个行高。例如：默认情况下，只有一个行高，展开后，展开面板的高度也被认为是同一个 Row 的
+   * 所以可展开时，行高有多个，所有行高之和，则为 Row 的高度
+   * 行高之间使用唯一的 key 作为区分
+   * Record<rowKey, Map<key, height>>
+   */
+  var rowHeightByRowKey = useRef(new Map());
+  var setRowHeightByRowKey = useCallback(function (rowKey, key, height) {
+    var _rowHeightByRowKey$cu;
+    var target = (_rowHeightByRowKey$cu = rowHeightByRowKey.current.get(rowKey)) != null ? _rowHeightByRowKey$cu : new Map();
+    target.set(key, height);
+    rowHeightByRowKey.current.set(rowKey, target);
+  }, []);
+  var getAllRowHeights = function getAllRowHeights() {
+    var heights = [];
+    rawData.forEach(function (item) {
+      var key = getRowKey(item, rowKey);
+      var row = rowHeightByRowKey.current.get(key);
+      if (row == null) {
+        heights.push(estimateSize);
+      } else {
+        var height = 0;
+        row.forEach(function (x) {
+          return height += x;
+        });
+        heights.push(height);
+      }
+    });
+    return heights;
+  };
+  // 行高信息（先填充预估高度，DOM渲染后再更新成实际高度）
+  var fillRowHeights = function fillRowHeights() {
+    if (rawData.length === 0) {
+      rowHeightByRowKey.current.clear();
+      return;
+    }
+    rawData.forEach(function (item) {
+      var _rowHeightByRowKey$cu2;
+      var key = getRowKey(item, rowKey);
+      var row = (_rowHeightByRowKey$cu2 = rowHeightByRowKey.current.get(key)) != null ? _rowHeightByRowKey$cu2 : new Map();
+      var target = row.get(NormalRowHeightKey);
+      if (target == null) {
+        row.set(NormalRowHeightKey, estimateSize);
+      }
+      rowHeightByRowKey.current.set(key, row);
+    });
+  };
+  fillRowHeights();
+  // 强制设置类型为 number[]，在后面会初始化，只是为了减少 getAllRowHeights 的调用
+  var rowHeights = useRef();
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (rowHeights.current == null) {
+    rowHeights.current = getAllRowHeights();
+  } else if (rawData.length !== rowHeights.current.length) {
+    // 这个判断条件主要是为了处理：空数据切换为有数据时 tbody 上 padding 缺失的问题
+    rowHeights.current = getAllRowHeights();
+  }
+  // 布局信息（也就是锚点元素需要的信息，top,bottom,height,index）
+  var rowRects = useRef([]);
+  var updateRowRects = function updateRowRects() {
+    var _rawData$reduce = rawData.reduce(function (result, rowData, index) {
+        var _rowHeightByRowKey$cu3;
+        var key = getRowKey(rowData, rowKey);
+        var height = 0;
+        (_rowHeightByRowKey$cu3 = rowHeightByRowKey.current.get(key)) == null || _rowHeightByRowKey$cu3.forEach(function (item) {
+          height += item;
+        });
+        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 = _rawData$reduce.rects;
+    rowRects.current = rects;
+  };
+  /** 刷新布局信息，行高变化的时候调用，要重新组织布局信息(rowRects) */
+  var flushLayout = function flushLayout(fn) {
+    fn == null || fn();
+    updateRowRects();
+    // 组件渲染后会触发 flushLayout，表示行高有更新所以需要更新一下 rowHeights
+    // 避免展开行之后记录的还是之前的行高信息，否则滚动后底部会出现空白区域
+    rowHeights.current = rowRects.current.map(function (x) {
+      return x.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,
+    flushLayout: flushLayout,
+    rowHeightByRowKey: rowHeightByRowKey,
+    setRowHeightByRowKey: setRowHeightByRowKey,
+    topBlank: topBlank,
+    bottomBlank: bottomBlank,
+    dataSlice: dataSlice
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 function useStableFn(callback) {
   var fn = useRef(null);
@@ -574,6 +868,145 @@ function useStableFn(callback) {
   return stableFn;
 }
 
+var TableInstance = /*#__PURE__*/function () {
+  function TableInstance() {
+    Object.defineProperty(this, "instance", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: {
+        getCurrentProps: function getCurrentProps() {
+          throw new Error('getCurrentProps() has not been implemented yet');
+        },
+        getColumns: function getColumns() {
+          throw new Error('getColumns() has not been implemented yet');
+        },
+        getDataSource: function getDataSource() {
+          throw new Error('getDataSource() has not been implemented yet');
+        },
+        getDOM: function getDOM() {
+          throw new Error('getDOM() has not been implemented yet');
+        },
+        getRowHeightMap: function getRowHeightMap() {
+          throw new Error('getRowHeightMap() has not been implemented yet');
+        },
+        getRowVirtualizeState: function getRowVirtualizeState() {
+          throw new Error('getRowVirtualizeState() has not been implemented yet');
+        },
+        getScrollValueByRowIndex: function getScrollValueByRowIndex() {
+          throw new Error('getScrollValueByRowIndex() has not been implemented yet');
+        },
+        getScrollValueByColumnKey: function getScrollValueByColumnKey() {
+          throw new Error('getScrollValueByColumnKey() has not been implemented yet');
+        },
+        scrollToRow: function scrollToRow() {
+          throw new Error('scrollToRow() has not been implemented yet');
+        },
+        scrollToColumn: function scrollToColumn() {
+          throw new Error('scrollToColumn() has not been implemented yet');
+        },
+        scrollTo: function scrollTo() {
+          throw new Error('scrollTo() has not been implemented yet');
+        },
+        getColumnByKey: function getColumnByKey() {
+          throw new Error('getColumnByKey() has not been implemented yet');
+        },
+        getColumnByIndex: function getColumnByIndex() {
+          throw new Error('getColumnByIndex() has not been implemented yet');
+        },
+        getColumnKeyByIndex: function getColumnKeyByIndex() {
+          throw new Error('getColumnKeyByIndex() has not been implemented yet');
+        },
+        getColumnWidths: function getColumnWidths() {
+          throw new Error('getColumnWidths() has not been implemented yet');
+        },
+        getColumnWidthByKey: function getColumnWidthByKey() {
+          throw new Error('getColumnWidthByKey() has not been implemented yet');
+        }
+      }
+    });
+    this.getInstance = this.getInstance.bind(this);
+    this.getInternalHooks = this.getInternalHooks.bind(this);
+  }
+  var _proto = TableInstance.prototype;
+  _proto.getInternalHooks = function getInternalHooks() {
+    var _this = this;
+    return {
+      implGetCurrentProps: function implGetCurrentProps(fn) {
+        _this.instance.getCurrentProps = fn;
+      },
+      implGetColumns: function implGetColumns(fn) {
+        _this.instance.getColumns = fn;
+      },
+      implGetDataSource: function implGetDataSource(fn) {
+        _this.instance.getDataSource = fn;
+      },
+      implGetDOM: function implGetDOM(fn) {
+        _this.instance.getDOM = fn;
+      },
+      implGetRowVirtualizeState: function implGetRowVirtualizeState(fn) {
+        _this.instance.getRowVirtualizeState = fn;
+      },
+      implGetRowHeightMap: function implGetRowHeightMap(fn) {
+        _this.instance.getRowHeightMap = fn;
+      },
+      implScrollValueByRowIndex: function implScrollValueByRowIndex(fn) {
+        _this.instance.getScrollValueByRowIndex = fn;
+      },
+      implScrollValueByColumnKey: function implScrollValueByColumnKey(fn) {
+        _this.instance.getScrollValueByColumnKey = fn;
+      },
+      implScrollToRow: function implScrollToRow(fn) {
+        _this.instance.scrollToRow = fn;
+      },
+      implScrollToColumn: function implScrollToColumn(fn) {
+        _this.instance.scrollToColumn = fn;
+      },
+      implScrollTo: function implScrollTo(fn) {
+        _this.instance.scrollTo = fn;
+      },
+      implGetColumnByKey: function implGetColumnByKey(fn) {
+        _this.instance.getColumnByKey = fn;
+      },
+      implGetColumnByIndex: function implGetColumnByIndex(fn) {
+        _this.instance.getColumnByIndex = fn;
+      },
+      implGetColumnKeyByIndex: function implGetColumnKeyByIndex(fn) {
+        _this.instance.getColumnKeyByIndex = fn;
+      },
+      implGetColumnWidths: function implGetColumnWidths(fn) {
+        _this.instance.getColumnWidths = fn;
+      },
+      implGetColumnWidthByKey: function implGetColumnWidthByKey(fn) {
+        _this.instance.getColumnWidthByKey = fn;
+      }
+    };
+  };
+  _proto.getInstance = function getInstance() {
+    var _this2 = this;
+    return _extends({}, Object.keys(this.instance).reduce(function (result, key) {
+      // @ts-expect-error I just don't want to write some boilerplate code, so I use traversal, but there is no problem at runtime
+      result[key] = function () {
+        var _this2$instance;
+        return (_this2$instance = _this2.instance)[key].apply(_this2$instance, arguments);
+      };
+      return result;
+    }, {}), {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      getInternalHooks: this.getInternalHooks
+    });
+  };
+  return TableInstance;
+}();
+function useTableInstance(instance) {
+  return useMemo(function () {
+    if (instance == null) {
+      return new TableInstance().getInstance();
+    }
+    return instance;
+  }, [instance]);
+}
+
 /**
  * 创建中间件，内部会浅比较 options，只有 options 改变才会返回新的函数。
  */
@@ -766,20 +1199,20 @@ function findLastIndex(arr, predicate) {
   return result;
 }
 
-var _excluded$1 = ["className", "rowIndex", "rowData", "columns", "onRow", "renderRow", "renderCell"],
+var _excluded$1 = ["className", "rowKey", "rowIndex", "rowData", "columns", "onRow", "renderRow", "renderCell", "onRefCallback"],
   _excluded2 = ["className"];
 function Row(props) {
   var _onRow;
   var className = props.className,
+    rowKey = props.rowKey,
     rowIndex = props.rowIndex,
     rowData = props.rowData,
     columnDescriptor = props.columns,
     onRow = props.onRow,
     renderRow = props.renderRow,
     renderCell = props.renderCell,
+    onRefCallback = props.onRefCallback,
     rest = _objectWithoutPropertiesLoose(props, _excluded$1);
-  var _useTableRowManager = useTableRowManager(),
-    updateRowHeight = _useTableRowManager.updateRowHeight;
   var columns = columnDescriptor.columns,
     descriptor = columnDescriptor.descriptor;
   var lastFixedLeftColumnIndex = findLastIndex(descriptor, function (x) {
@@ -801,9 +1234,12 @@ function Row(props) {
     className: clsx('virtual-table-row', className, extraClassName),
     "data-row-index": rowIndex,
     ref: function ref(node) {
-      if (node == null) return;
-      // 小心陷阱：当 table 父元素为 display: none 时，依然会触发 updateRowHeight 函数，并设置高度为 0
-      updateRowHeight(rowIndex, rowIndex, node.offsetHeight);
+      onRefCallback == null || onRefCallback({
+        node: node,
+        rowKey: rowKey,
+        rowIndex: rowIndex,
+        rowData: rowData
+      });
     },
     children: descriptor.map(function (item, index) {
       var key = item.key;
@@ -821,6 +1257,7 @@ function Row(props) {
     })
   })), renderRow, {
     columns: columns,
+    rowKey: rowKey,
     rowIndex: rowIndex,
     rowData: rowData,
     columnDescriptor: descriptor
@@ -853,217 +1290,6 @@ function useMergedRef() {
   return useCallback(mergeRefs.apply(void 0, 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 === void 0) {
-      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,
@@ -1073,6 +1299,7 @@ function TableBody(props) {
     rawData = props.dataSource,
     columnDescriptor = props.columns,
     rowKey = props.rowKey,
+    instance = props.instance,
     overscan = props.overscan,
     estimateSize = props.estimateSize,
     getScroller = props.getScroller,
@@ -1085,68 +1312,65 @@ function TableBody(props) {
     renderBodyContent = props.renderBodyContent,
     renderRow = props.renderRow,
     renderCell = props.renderCell;
+  var internalHook = instance.getInternalHooks();
   var _useRowVirtualize = useRowVirtualize({
       getOffsetTop: getOffsetTop,
+      rowKey: rowKey,
       dataSource: rawData,
       getScroller: getScroller,
       estimateSize: estimateSize,
       overscan: overscan
     }),
     startIndex = _useRowVirtualize.startIndex,
+    endIndex = _useRowVirtualize.endIndex,
     dataSource = _useRowVirtualize.dataSlice,
-    setRowHeight = _useRowVirtualize.setRowHeight,
-    updateRowRectList = _useRowVirtualize.updateRowRectList,
+    rowHeightByRowKey = _useRowVirtualize.rowHeightByRowKey,
+    setRowHeightByRowKey = _useRowVirtualize.setRowHeightByRowKey,
+    flushLayout = _useRowVirtualize.flushLayout,
     rowHeightList = _useRowVirtualize.rowHeightList,
     topBlank = _useRowVirtualize.topBlank,
     bottomBlank = _useRowVirtualize.bottomBlank;
-  // Record<rowIndex, Map(rowHeight)>
-  // 一个 Row 可能有多个行高。例如：默认情况下，只有一个行高，展开后，展开面板的高度也被认为是同一个 Row 的
-  // 所以可展开时，行高有多个，所有行高之和，则为 Row 的高度
-  // 行高之间使用唯一的 key 作为区分
-  var rowHeights = useRef(new Map());
-  // 更新行高。一般会在 body 渲染后、展开面板中调用
-  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 () {
+  internalHook.implGetRowVirtualizeState(function () {
     return {
-      updateRowHeight: updateRowHeight,
-      getRowHeightList: function getRowHeightList() {
-        return rowHeightList.current;
-      }
+      startIndex: startIndex,
+      endIndex: endIndex,
+      overscan: overscan,
+      estimateSize: estimateSize
     };
-  }, [rowHeightList, updateRowHeight]);
-  var columns = columnDescriptor.columns,
-    descriptor = columnDescriptor.descriptor;
+  });
+  internalHook.implGetRowHeightMap(function () {
+    return rowHeightByRowKey.current;
+  });
   var tbodyRef = useMergedRef(bodyRef, function (elm) {
     if (elm == null) return;
     var bodyHeight = elm.offsetHeight;
     if (bodyHeight === 0) return;
     // body 的 ref 回调函数中，说明 body 渲染完成，也就意味着所有的 tr 也已经渲染完成，
-    // 现在可以获取 tr 的高度，记录准确行高
-    var heights = rowHeights.current;
-    heights.forEach(function (row, rowIndex) {
-      var height = Array.from(row.values()).reduce(function (res, x) {
-        return res + x;
-      }, 0);
-      setRowHeight(rowIndex, height);
-    });
-    updateRowRectList();
-    rowHeights.current.clear();
+    // 现在可以记录所有 tr 的高度
+    flushLayout();
   });
+  // 测量行高
+  var onMeasureRowHeight = useCallback(function (args) {
+    var node = args.node,
+      rowKey = args.rowKey;
+    if (node == null) return;
+    // 小心陷阱：当 table 父元素为 display: none 时，依然会触发，并设置高度为 0
+    setRowHeightByRowKey(rowKey, NormalRowHeightKey, node.offsetHeight);
+  }, [setRowHeightByRowKey]);
+  var columns = columnDescriptor.columns,
+    descriptor = columnDescriptor.descriptor;
   var bodyContent = pipelineRender(dataSource.map(function (e, rowIndex) {
     var key = getRowKey(e, rowKey);
     return jsx(Row$1, {
       className: clsx(rowClassName == null ? void 0 : rowClassName(e, rowIndex)),
+      rowKey: key,
       rowIndex: rowIndex + startIndex,
       rowData: e,
       columns: columnDescriptor,
       onRow: onRow,
       renderRow: renderRow,
-      renderCell: renderCell
+      renderCell: renderCell,
+      onRefCallback: onMeasureRowHeight
     }, key);
   }), renderBodyContent, {
     columns: columns,
@@ -1205,6 +1429,43 @@ function TableBody(props) {
     };
   }, [listen, notify]);
   var mergedRef = useMergedRef(wrapperRef, bodyWrapperRef);
+  // 滚动到指定行。注意：如果 estimatedRowHeight 不够准确时，不一定能准确滚动到目标位置
+  internalHook.implScrollValueByRowIndex(function (index) {
+    var scroller = getScroller();
+    if (scroller == null) {
+      return 0;
+    }
+    var _instance$getCurrentP = instance.getCurrentProps(),
+      stickyHeader = _instance$getCurrentP.stickyHeader;
+    var _instance$getDOM = instance.getDOM(),
+      headerWrapper = _instance$getDOM.headerWrapper;
+    var offset = 0;
+    // 没有 sticky，就要计算 header 高度
+    if (stickyHeader == null || stickyHeader === false) {
+      var headerOffsetHeight = headerWrapper == null ? 0 : headerWrapper.offsetHeight;
+      offset = headerOffsetHeight;
+    } else {
+      offset = Number.isFinite(stickyHeader) ? stickyHeader * -1 : 0;
+    }
+    var targetScrollTop = rowHeightList.current.slice(0, index).reduce(function (a, b) {
+      return a + b;
+    }, 0);
+    return targetScrollTop + getOffsetTop() + offset;
+  });
+  internalHook.implScrollToRow(function (index, behavior) {
+    instance.scrollTo({
+      top: instance.getScrollValueByRowIndex(index),
+      behavior: behavior
+    });
+  });
+  var rowManageState = useMemo(function () {
+    return {
+      setRowHeightByRowKey: setRowHeightByRowKey,
+      getRowHeightList: function getRowHeightList() {
+        return rowHeightList.current;
+      }
+    };
+  }, [rowHeightList, setRowHeightByRowKey]);
   return jsx(TableRowManager.Provider, {
     value: rowManageState,
     children: pipelineRender(jsx("div", {
@@ -1634,6 +1895,7 @@ var TableRoot$1 = /*#__PURE__*/forwardRef(TableRoot);
 
 function VirtualTableCore(props, ref) {
   var bodyRootRef = props.bodyRootRef,
+    rawInstance = props.instance,
     className = props.className,
     style = props.style,
     tableBodyClassName = props.tableBodyClassName,
@@ -1659,6 +1921,11 @@ function VirtualTableCore(props, ref) {
     getOffsetTopImpl = props.getOffsetTop,
     _props$virtualHeader = props.virtualHeader,
     virtualHeader = _props$virtualHeader === void 0 ? true : _props$virtualHeader;
+  var instance = useTableInstance(rawInstance);
+  var internalHook = instance.getInternalHooks();
+  internalHook.implGetCurrentProps(function () {
+    return props;
+  });
   var rootNode = useRef(null);
   var headerWrapperRef = useRef(null);
   var bodyWrapperRef = useRef(null);
@@ -1696,7 +1963,8 @@ function VirtualTableCore(props, ref) {
       bodyRef: bodyRef,
       rootRef: rootNode,
       getOffsetTop: getOffsetTop,
-      getScroller: getScroller
+      getScroller: getScroller,
+      instance: instance
     }),
     dataSource = _pipeline$use.dataSource,
     pipelineColumns = _pipeline$use.columns,
@@ -1717,6 +1985,12 @@ function VirtualTableCore(props, ref) {
     renderRow = _pipeline$use.renderRow,
     renderCell = _pipeline$use.renderCell,
     onPipelineRow = _pipeline$use.onRow;
+  internalHook.implGetColumns(function () {
+    return pipelineColumns;
+  });
+  internalHook.implGetDataSource(function () {
+    return dataSource;
+  });
   var _useState = useState(function () {
       return new Map();
     }),
@@ -1731,6 +2005,12 @@ function VirtualTableCore(props, ref) {
     columnWidthsRef.current = result;
     setColumnWidths(result);
   }, []);
+  internalHook.implGetColumnWidths(function () {
+    return columnWidthsRef.current;
+  });
+  internalHook.implGetColumnWidthByKey(function (columnKey) {
+    return columnWidthsRef.current.get(columnKey);
+  });
   var tableColumnsContext = useMemo(function () {
     return {
       widthList: columnWidths,
@@ -1778,6 +2058,76 @@ function VirtualTableCore(props, ref) {
     }
     return fullHeaderColumns;
   }, [virtualHeader, fullHeaderColumns, columns]);
+  internalHook.implGetDOM(function () {
+    return {
+      root: rootNode.current,
+      headerWrapper: headerWrapperRef.current,
+      bodyWrapper: bodyWrapperRef.current,
+      bodyRoot: bodyRoot.current,
+      body: bodyRef.current
+    };
+  });
+  internalHook.implScrollTo(function (options) {
+    var left = options.left,
+      top = options.top;
+    if (left != null) {
+      var _bodyWrapperRef$curre;
+      if (process.env.NODE_ENV === 'development') {
+        if (bodyWrapperRef.current == null) {
+          console.error('The bodyWrapper DOM is not obtained, and scrolling is not possible.');
+        }
+      }
+      (_bodyWrapperRef$curre = bodyWrapperRef.current) == null || _bodyWrapperRef$curre.scrollTo(options);
+    }
+    if (top != null) {
+      var scroller = getScroller();
+      if (scroller == null) {
+        console.error('The scroller DOM is not obtained, and scrolling is not possible.');
+        return;
+      }
+      scroller.scrollTo(options);
+    }
+  });
+  internalHook.implScrollValueByColumnKey(function (key) {
+    var scrollLeft = 0;
+    var leftFixedWidth = 0;
+    // 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)) {
+        leftFixedWidth += width;
+      }
+      if (columnKey === key) {
+        break;
+      }
+      scrollLeft += width;
+    }
+    return scrollLeft - leftFixedWidth;
+  });
+  internalHook.implScrollToColumn(function (key, behavior) {
+    instance.scrollTo({
+      left: instance.getScrollValueByColumnKey(key),
+      behavior: behavior
+    });
+  });
+  internalHook.implGetColumnByKey(function (key) {
+    return pipelineColumns.find(function (x) {
+      return getKey(x) === key;
+    });
+  });
+  internalHook.implGetColumnByIndex(function (index) {
+    return pipelineColumns[index];
+  });
+  internalHook.implGetColumnKeyByIndex(function (index) {
+    var column = instance.getColumnByIndex(index);
+    if (column != null) {
+      return getKey(column);
+    }
+  });
   var contentNode = pipelineRender(jsxs(Fragment$1, {
     children: [jsx(TableHeader$1, {
       wrapperRef: headerWrapperRef,
@@ -1789,6 +2139,7 @@ function VirtualTableCore(props, ref) {
       renderHeaderRow: renderHeaderRow,
       renderHeaderCell: renderHeaderCell
     }), jsx(TableBody, {
+      instance: instance,
       bodyWrapperRef: bodyWrapperRef,
       bodyRootRef: mergedBodyRootRef,
       bodyRef: bodyRef,
@@ -1847,5 +2198,5 @@ if (process.env.NODE_ENV === 'development') {
 }
 var table = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(VirtualTableCore));
 
-export { Colgroup$1 as Colgroup, 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, useTablePipeline, useTableRowManager, useTableSticky };
+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 };
 //# sourceMappingURL=index.esm.js.map