material-react-table 0.19.0 → 0.20.0

package/dist/material-react-table.cjs.development.js

@@ -6365,40 +6365,28 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }));
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$2(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
+/**
+ * react-virtual
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
 
-var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+var props = ["bottom", "height", "left", "right", "top", "width"];
 
 var rectChanged = function rectChanged(a, b) {
   if (a === void 0) {
@@ -6468,355 +6456,383 @@ function observeRect(node, cb) {
   };
 }
 
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
+function memo(getDeps, fn, opts) {
+  let deps = [];
+  let result;
+  return () => {
+    let depTime;
+    if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
 
-function useRect(nodeRef, initialRect) {
-  if (initialRect === void 0) {
-    initialRect = {
-      width: 0,
-      height: 0
-    };
-  }
+    if (!depsChanged) {
+      return result;
+    }
 
-  var _React$useState = React__default.useState(nodeRef.current),
-      element = _React$useState[0],
-      setElement = _React$useState[1];
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
+    result = fn(...newDeps);
+    opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
 
-  var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
-      rect = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
+    if (opts.key && opts.debug != null && opts.debug()) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
 
-  var initialRectSet = React__default.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (nodeRef.current !== element) {
-      setElement(nodeRef.current);
-    }
-  });
-  useIsomorphicLayoutEffect$1(function () {
-    if (element && !initialRectSet.current) {
-      initialRectSet.current = true;
+      const pad = (str, num) => {
+        str = String(str);
 
-      var _rect = element.getBoundingClientRect();
+        while (str.length < num) {
+          str = ' ' + str;
+        }
 
-      dispatch({
-        rect: _rect
-      });
-    }
-  }, [element]);
-  React__default.useEffect(function () {
-    if (!element) {
-      return;
+        return str;
+      };
+
+      console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
     }
 
-    var observer = observeRect(element, function (rect) {
-      dispatch({
-        rect: rect
-      });
-    });
-    observer.observe();
-    return function () {
-      observer.unobserve();
-    };
-  }, [element]);
-  return rect;
+    return result;
+  };
 }
 
-function rectReducer(state, action) {
-  var rect = action.rect;
+//
+const defaultKeyExtractor = index => index;
+const defaultRangeExtractor = range => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
 
-  if (state.height !== rect.height || state.width !== rect.width) {
-    return rect;
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
   }
 
-  return state;
-}
-
-var defaultEstimateSize = function defaultEstimateSize() {
-  return 50;
+  return arr;
 };
+const observeElementRect = (instance, cb) => {
+  const observer = observeRect(instance.scrollElement, rect => {
+    cb(rect);
+  });
 
-var defaultKeyExtractor = function defaultKeyExtractor(index) {
-  return index;
-};
+  if (!instance.scrollElement) {
+    return;
+  }
 
-var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
-  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
-  return el[key];
+  cb(instance.scrollElement.getBoundingClientRect());
+  observer.observe();
+  return () => {
+    observer.unobserve();
+  };
 };
+const observeElementOffset = (instance, cb) => {
+  const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
 
-var defaultRangeExtractor = function defaultRangeExtractor(range) {
-  var start = Math.max(range.start - range.overscan, 0);
-  var end = Math.min(range.end + range.overscan, range.size - 1);
-  var arr = [];
-
-  for (var i = start; i <= end; i++) {
-    arr.push(i);
+  if (!instance.scrollElement) {
+    return;
   }
 
-  return arr;
+  onScroll();
+  instance.scrollElement.addEventListener('scroll', onScroll, {
+    capture: false,
+    passive: true
+  });
+  return () => {
+    instance.scrollElement.removeEventListener('scroll', onScroll);
+  };
 };
-function useVirtual(_ref) {
-  var _measurements;
-
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 0 : _ref$size,
-      _ref$estimateSize = _ref.estimateSize,
-      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
-      _ref$overscan = _ref.overscan,
-      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
-      _ref$paddingStart = _ref.paddingStart,
-      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
-      _ref$paddingEnd = _ref.paddingEnd,
-      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
-      parentRef = _ref.parentRef,
-      horizontal = _ref.horizontal,
-      scrollToFn = _ref.scrollToFn,
-      useObserver = _ref.useObserver,
-      initialRect = _ref.initialRect,
-      onScrollElement = _ref.onScrollElement,
-      scrollOffsetFn = _ref.scrollOffsetFn,
-      _ref$keyExtractor = _ref.keyExtractor,
-      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
-      _ref$measureSize = _ref.measureSize,
-      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
-      _ref$rangeExtractor = _ref.rangeExtractor,
-      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
-  var sizeKey = horizontal ? 'width' : 'height';
-  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
-  var latestRef = React__default.useRef({
-    scrollOffset: 0,
-    measurements: []
+const measureElement = (element, instance) => {
+  return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
+};
+const elementScroll = (offset, canSmooth, instance) => {
+  var _instance$scrollEleme2;
+  (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
+    [instance.options.horizontal ? 'left' : 'top']: offset,
+    behavior: canSmooth ? 'smooth' : undefined
   });
+};
+class Virtualizer {
+  constructor(_opts) {
+    var _this = this;
+
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.measurementsCache = [];
+    this.itemMeasurementsCache = {};
+    this.pendingMeasuredCacheIndexes = [];
+
+    this.setOptions = opts => {
+      Object.entries(opts).forEach(_ref => {
+        let [key, value] = _ref;
+        if (typeof value === 'undefined') delete opts[key];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        enableSmoothScroll: true,
+        onChange: () => {},
+        measureElement,
+        initialRect: {
+          width: 0,
+          height: 0
+        },
+        ...opts
+      };
+    };
 
-  var _React$useState = React__default.useState(0),
-      scrollOffset = _React$useState[0],
-      setScrollOffset = _React$useState[1];
+    this.notify = () => {
+      var _this$options$onChang, _this$options;
 
-  latestRef.current.scrollOffset = scrollOffset;
-  var useMeasureParent = useObserver || useRect;
+      (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
+    };
 
-  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
-      outerSize = _useMeasureParent[sizeKey];
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach(d => d());
+      this.unsubs = [];
+    };
 
-  latestRef.current.outerSize = outerSize;
-  var defaultScrollToFn = React__default.useCallback(function (offset) {
-    if (parentRef.current) {
-      parentRef.current[scrollKey] = offset;
-    }
-  }, [parentRef, scrollKey]);
-  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
-  scrollToFn = React__default.useCallback(function (offset) {
-    resolvedScrollToFn(offset, defaultScrollToFn);
-  }, [defaultScrollToFn, resolvedScrollToFn]);
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
 
-  var _React$useState2 = React__default.useState({}),
-      measuredCache = _React$useState2[0],
-      setMeasuredCache = _React$useState2[1];
+    this._willUpdate = () => {
+      const scrollElement = this.options.getScrollElement();
+
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        this.scrollElement = scrollElement;
+        this.unsubs.push(this.options.observeElementRect(this, rect => {
+          this.scrollRect = rect;
+          this.notify();
+        }));
+        this.unsubs.push(this.options.observeElementOffset(this, offset => {
+          this.scrollOffset = offset;
+          this.notify();
+        }));
+      }
+    };
 
-  var measure = React__default.useCallback(function () {
-    return setMeasuredCache({});
-  }, []);
-  var pendingMeasuredCacheIndexesRef = React__default.useRef([]);
-  var measurements = React__default.useMemo(function () {
-    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
-    pendingMeasuredCacheIndexesRef.current = [];
-    var measurements = latestRef.current.measurements.slice(0, min);
+    this.getSize = () => {
+      return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
+    };
 
-    for (var i = min; i < size; i++) {
-      var key = keyExtractor(i);
-      var measuredSize = measuredCache[key];
+    this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
+      const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+      this.pendingMeasuredCacheIndexes = [];
+      const measurements = this.measurementsCache.slice(0, min);
+
+      for (let i = min; i < count; i++) {
+        const key = getItemKey(i);
+        const measuredSize = measurementsCache[key];
+        const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+        const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
+        const end = start + size;
+        measurements[i] = {
+          index: i,
+          start,
+          size,
+          end,
+          key
+        };
+      }
 
-      var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+      this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key:  'getMeasurements',
+      debug: () => this.options.debug
+    });
+    this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
+      return calculateRange({
+        measurements,
+        outerSize,
+        scrollOffset
+      });
+    }, {
+      key:  'calculateRange',
+      debug: () => this.options.debug
+    });
+    this.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+      return rangeExtractor({ ...range,
+        overscan,
+        count: count
+      });
+    }, {
+      key:  'getIndexes'
+    });
+    this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
+      const virtualItems = [];
+
+      for (let k = 0, len = indexes.length; k < len; k++) {
+        const i = indexes[k];
+        const measurement = measurements[i];
+        const item = { ...measurement,
+          measureElement: measurableItem => {
+            if (measurableItem) {
+              const measuredItemSize = measureElement(measurableItem, this);
+
+              if (measuredItemSize !== item.size) {
+                if (item.start < this.scrollOffset) {
+                  if ( this.options.debug) console.info('correction', measuredItemSize - item.size);
+
+                  if (!this.destinationOffset) {
+                    this._scrollToOffset(this.scrollOffset + (measuredItemSize - item.size), false);
+                  }
+                }
 
-      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
+                this.pendingMeasuredCacheIndexes.push(i);
+                this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
+                  [item.key]: measuredItemSize
+                };
+                this.notify();
+              }
+            }
+          }
+        };
+        virtualItems.push(item);
+      }
 
-      var _end = _start + _size;
+      return virtualItems;
+    }, {
+      key:  'getIndexes'
+    });
 
-      measurements[i] = {
-        index: i,
-        start: _start,
-        size: _size,
-        end: _end,
-        key: key
-      };
-    }
+    this.scrollToOffset = function (toOffset, _temp) {
+      let {
+        align
+      } = _temp === void 0 ? {
+        align: 'start'
+      } : _temp;
+
+      const attempt = () => {
+        const offset = _this.scrollOffset;
+
+        const size = _this.getSize();
+
+        if (align === 'auto') {
+          if (toOffset <= offset) {
+            align = 'start';
+          } else if (toOffset >= offset + size) {
+            align = 'end';
+          } else {
+            align = 'start';
+          }
+        }
 
-    return measurements;
-  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
-  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
-  latestRef.current.measurements = measurements;
-  latestRef.current.totalSize = totalSize;
-  var element = onScrollElement ? onScrollElement.current : parentRef.current;
-  var scrollOffsetFnRef = React__default.useRef(scrollOffsetFn);
-  scrollOffsetFnRef.current = scrollOffsetFn;
-  useIsomorphicLayoutEffect$1(function () {
-    if (!element) {
-      setScrollOffset(0);
-      return;
-    }
+        if (align === 'start') {
+          _this._scrollToOffset(toOffset, true);
+        } else if (align === 'end') {
+          _this._scrollToOffset(toOffset - size, true);
+        } else if (align === 'center') {
+          _this._scrollToOffset(toOffset - size / 2, true);
+        }
+      };
 
-    var onScroll = function onScroll(event) {
-      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
-      setScrollOffset(offset);
+      attempt();
+      requestAnimationFrame(() => {
+        attempt();
+      });
     };
 
-    onScroll();
-    element.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true
-    });
-    return function () {
-      element.removeEventListener('scroll', onScroll);
-    };
-  }, [element, scrollKey]);
-
-  var _calculateRange = calculateRange(latestRef.current),
-      start = _calculateRange.start,
-      end = _calculateRange.end;
-
-  var indexes = React__default.useMemo(function () {
-    return rangeExtractor({
-      start: start,
-      end: end,
-      overscan: overscan,
-      size: measurements.length
-    });
-  }, [start, end, overscan, measurements.length, rangeExtractor]);
-  var measureSizeRef = React__default.useRef(measureSize);
-  measureSizeRef.current = measureSize;
-  var virtualItems = React__default.useMemo(function () {
-    var virtualItems = [];
-
-    var _loop = function _loop(k, len) {
-      var i = indexes[k];
-      var measurement = measurements[i];
-
-      var item = _extends$1(_extends$1({}, measurement), {}, {
-        measureRef: function measureRef(el) {
-          if (el) {
-            var measuredSize = measureSizeRef.current(el, horizontal);
-
-            if (measuredSize !== item.size) {
-              var _scrollOffset = latestRef.current.scrollOffset;
-
-              if (item.start < _scrollOffset) {
-                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
-              }
+    this.scrollToIndex = function (index, _temp2) {
+      let {
+        align,
+        ...rest
+      } = _temp2 === void 0 ? {
+        align: 'auto'
+      } : _temp2;
 
-              pendingMeasuredCacheIndexesRef.current.push(i);
-              setMeasuredCache(function (old) {
-                var _extends2;
+      const measurements = _this.getMeasurements();
 
-                return _extends$1(_extends$1({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
-              });
-            }
-          }
+      const offset = _this.scrollOffset;
+
+      const size = _this.getSize();
+
+      const {
+        count
+      } = _this.options;
+      const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
+
+      if (!measurement) {
+        return;
+      }
+
+      if (align === 'auto') {
+        if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+          align = 'end';
+        } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+          align = 'start';
+        } else {
+          return;
         }
-      });
+      }
 
-      virtualItems.push(item);
+      const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+
+      _this.scrollToOffset(toOffset, {
+        align,
+        ...rest
+      });
     };
 
-    for (var k = 0, len = indexes.length; k < len; k++) {
-      _loop(k);
-    }
+    this.getTotalSize = () => {
+      var _this$getMeasurements;
 
-    return virtualItems;
-  }, [indexes, defaultScrollToFn, horizontal, measurements]);
-  var mountedRef = React__default.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (mountedRef.current) {
-      setMeasuredCache({});
-    }
+      return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
+    };
 
-    mountedRef.current = true;
-  }, [estimateSize]);
-  var scrollToOffset = React__default.useCallback(function (toOffset, _temp) {
-    var _ref2 = _temp === void 0 ? {} : _temp,
-        _ref2$align = _ref2.align,
-        align = _ref2$align === void 0 ? 'start' : _ref2$align;
+    this._scrollToOffset = (offset, canSmooth) => {
+      clearTimeout(this.scrollCheckFrame);
+      this.destinationOffset = offset;
+      this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, this);
+      let scrollCheckFrame;
 
-    var _latestRef$current = latestRef.current,
-        scrollOffset = _latestRef$current.scrollOffset,
-        outerSize = _latestRef$current.outerSize;
+      const check = () => {
+        let lastOffset = this.scrollOffset;
+        this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
+          if (this.scrollCheckFrame !== scrollCheckFrame) {
+            return;
+          }
 
-    if (align === 'auto') {
-      if (toOffset <= scrollOffset) {
-        align = 'start';
-      } else if (toOffset >= scrollOffset + outerSize) {
-        align = 'end';
-      } else {
-        align = 'start';
-      }
-    }
+          if (this.scrollOffset === lastOffset) {
+            this.destinationOffset = undefined;
+            return;
+          }
 
-    if (align === 'start') {
-      scrollToFn(toOffset);
-    } else if (align === 'end') {
-      scrollToFn(toOffset - outerSize);
-    } else if (align === 'center') {
-      scrollToFn(toOffset - outerSize / 2);
-    }
-  }, [scrollToFn]);
-  var tryScrollToIndex = React__default.useCallback(function (index, _temp2) {
-    var _ref3 = _temp2 === void 0 ? {} : _temp2,
-        _ref3$align = _ref3.align,
-        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
-        rest = _objectWithoutPropertiesLoose$2(_ref3, ["align"]);
+          lastOffset = this.scrollOffset;
+          check();
+        }, 100);
+      };
 
-    var _latestRef$current2 = latestRef.current,
-        measurements = _latestRef$current2.measurements,
-        scrollOffset = _latestRef$current2.scrollOffset,
-        outerSize = _latestRef$current2.outerSize;
-    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
+      check();
+    };
 
-    if (!measurement) {
-      return;
-    }
+    this.measure = () => {
+      this.itemMeasurementsCache = {};
+      this.notify();
+    };
 
-    if (align === 'auto') {
-      if (measurement.end >= scrollOffset + outerSize) {
-        align = 'end';
-      } else if (measurement.start <= scrollOffset) {
-        align = 'start';
-      } else {
-        return;
-      }
-    }
+    this.setOptions(_opts);
+    this.scrollRect = this.options.initialRect;
+    this.scrollOffset = this.options.initialOffset;
+  }
 
-    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
-    scrollToOffset(toOffset, _extends$1({
-      align: align
-    }, rest));
-  }, [scrollToOffset, size]);
-  var scrollToIndex = React__default.useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    // We do a double request here because of
-    // dynamic sizes which can cause offset shift
-    // and end up in the wrong spot. Unfortunately,
-    // we can't know about those dynamic sizes until
-    // we try and render them. So double down!
-    tryScrollToIndex.apply(void 0, args);
-    requestAnimationFrame(function () {
-      tryScrollToIndex.apply(void 0, args);
-    });
-  }, [tryScrollToIndex]);
-  return {
-    virtualItems: virtualItems,
-    totalSize: totalSize,
-    scrollToOffset: scrollToOffset,
-    scrollToIndex: scrollToIndex,
-    measure: measure
-  };
 }
 
-var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
   while (low <= high) {
-    var middle = (low + high) / 2 | 0;
-    var currentValue = getCurrentValue(middle);
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
 
     if (currentValue < value) {
       low = middle + 1;
@@ -6834,27 +6850,57 @@ var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCur
   }
 };
 
-function calculateRange(_ref4) {
-  var measurements = _ref4.measurements,
-      outerSize = _ref4.outerSize,
-      scrollOffset = _ref4.scrollOffset;
-  var size = measurements.length - 1;
+function calculateRange(_ref2) {
+  let {
+    measurements,
+    outerSize,
+    scrollOffset
+  } = _ref2;
+  const count = measurements.length - 1;
 
-  var getOffset = function getOffset(index) {
-    return measurements[index].start;
-  };
+  const getOffset = index => measurements[index].start;
 
-  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
-  var end = start;
+  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+  let endIndex = startIndex;
 
-  while (end < size && measurements[end].end < scrollOffset + outerSize) {
-    end++;
+  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+    endIndex++;
   }
 
   return {
-    start: start,
-    end: end
+    startIndex,
+    endIndex
+  };
+}
+
+const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+function useVirtualizerBase(options) {
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = { ...options,
+    onChange: instance => {
+      rerender();
+      options.onChange == null ? void 0 : options.onChange(instance);
+    }
   };
+  const [instance] = React.useState(() => new Virtualizer(resolvedOptions));
+  instance.setOptions(resolvedOptions);
+  React.useEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect$1(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
 }
 
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
@@ -7262,14 +7308,25 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 
     return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
   }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
-  var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    overscan: density === 'compact' ? 20 : 10,
-    size: rows.length,
-    parentRef: tableContainerRef
+  var rowVirtualizer = enableRowVirtualization ? useVirtualizer(_extends({
+    count: rows.length,
+    estimateSize: function estimateSize() {
+      return density === 'compact' ? 25 : 50;
+    },
+    getScrollElement: function getScrollElement() {
+      return tableContainerRef.current;
+    },
+    overscan: density === 'compact' ? 30 : 10
   }, virtualizerProps)) : {};
-  var virtualRows = rowVirtualizer.virtualItems;
-  var paddingTop = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? virtualRows[0].start : 0;
-  var paddingBottom = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
+  var virtualRows = enableRowVirtualization ? rowVirtualizer.getVirtualItems() : [];
+  var paddingTop = 0;
+  var paddingBottom = 0;
+
+  if (enableRowVirtualization) {
+    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+    paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  }
+
   return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
     style: {
       height: paddingTop + "px"