material-react-table 1.4.0-beta.1 → 1.4.0-beta.3

package/dist/cjs/index.js

@@ -71,7 +71,6 @@ var TableHead = require('@mui/material/TableHead');
 var TableRow = require('@mui/material/TableRow');
 var TableCell = require('@mui/material/TableCell');
 var TableSortLabel = require('@mui/material/TableSortLabel');
-var reactVirtual = require('react-virtual');
 var TableBody = require('@mui/material/TableBody');
 var Skeleton = require('@mui/material/Skeleton');
 var TableFooter = require('@mui/material/TableFooter');
@@ -82,7 +81,26 @@ var Stack = require('@mui/material/Stack');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
@@ -2064,6 +2082,569 @@ const MRT_TableHead = ({ table }) => {
             : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
+/**
+ * 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
+ */
+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);
+    if (!depsChanged) {
+      return result;
+    }
+    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);
+    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;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = ' ' + str;
+        }
+        return str;
+      };
+      console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
+    }
+    return result;
+  };
+}
+
+/**
+ * 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
+ */
+
+//
+
+//
+
+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 = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb) => {
+  const observer = new ResizeObserver(entries => {
+    var _entries$, _entries$2;
+    cb({
+      width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+      height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+    });
+  });
+  if (!instance.scrollElement) {
+    return;
+  }
+  cb(instance.scrollElement.getBoundingClientRect());
+  observer.observe(instance.scrollElement);
+  return () => {
+    observer.unobserve(instance.scrollElement);
+  };
+};
+const scrollProps = {
+  element: ['scrollLeft', 'scrollTop'],
+  window: ['scrollX', 'scrollY']
+};
+const createOffsetObserver = mode => {
+  return (instance, cb) => {
+    if (!instance.scrollElement) {
+      return;
+    }
+    const propX = scrollProps[mode][0];
+    const propY = scrollProps[mode][1];
+    let prevX = instance.scrollElement[propX];
+    let prevY = instance.scrollElement[propY];
+    const scroll = () => {
+      const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+      cb(Math.max(0, offset - instance.options.scrollMargin));
+    };
+    scroll();
+    const onScroll = e => {
+      const target = e.currentTarget;
+      const scrollX = target[propX];
+      const scrollY = target[propY];
+      if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
+        scroll();
+      }
+      prevX = scrollX;
+      prevY = scrollY;
+    };
+    instance.scrollElement.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true
+    });
+    return () => {
+      instance.scrollElement.removeEventListener('scroll', onScroll);
+    };
+  };
+};
+const observeElementOffset = createOffsetObserver('element');
+const measureElement = (element, instance) => {
+  return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
+};
+const elementScroll = (offset, _ref2, instance) => {
+  var _instance$scrollEleme2;
+  let {
+    adjustments,
+    behavior,
+    sync
+  } = _ref2;
+  const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
+  (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
+    [instance.options.horizontal ? 'left' : 'top']: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(_opts) {
+    var _this = this;
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemMeasurementsCache = {};
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollAdjustments = 0;
+    this.measureElementCache = {};
+    this.pendingScrollToIndexCallback = null;
+    this.getResizeObserver = (() => {
+      let _ro = null;
+      return () => {
+        if (_ro) {
+          return _ro;
+        } else if (typeof ResizeObserver !== 'undefined') {
+          return _ro = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+              this._measureElement(entry.target, false);
+            });
+          });
+        } else {
+          return null;
+        }
+      };
+    })();
+    this.range = {
+      startIndex: 0,
+      endIndex: 0
+    };
+    this.setOptions = opts => {
+      Object.entries(opts).forEach(_ref3 => {
+        let [key, value] = _ref3;
+        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,
+        onChange: () => {},
+        measureElement,
+        initialRect: {
+          width: 0,
+          height: 0
+        },
+        scrollMargin: 0,
+        scrollingDelay: 150,
+        indexAttribute: 'data-index',
+        ...opts
+      };
+    };
+    this.notify = () => {
+      var _this$options$onChang, _this$options;
+      (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
+    };
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach(d => d());
+      this.unsubs = [];
+      this.scrollElement = null;
+    };
+    this._didMount = () => {
+      const ro = this.getResizeObserver();
+      Object.values(this.measureElementCache).forEach(node => ro == null ? void 0 : ro.observe(node));
+      return () => {
+        ro == null ? void 0 : ro.disconnect();
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _this$pendingScrollTo;
+      (_this$pendingScrollTo = this.pendingScrollToIndexCallback) == null ? void 0 : _this$pendingScrollTo.call(this);
+      const scrollElement = this.options.getScrollElement();
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        this.scrollElement = scrollElement;
+        this._scrollToOffset(this.scrollOffset, {
+          adjustments: undefined,
+          behavior: undefined,
+          sync: true
+        });
+        this.unsubs.push(this.options.observeElementRect(this, rect => {
+          this.scrollRect = rect;
+          this.calculateRange();
+        }));
+        this.unsubs.push(this.options.observeElementOffset(this, offset => {
+          if (this.isScrollingTimeoutId !== null) {
+            clearTimeout(this.isScrollingTimeoutId);
+            this.isScrollingTimeoutId = null;
+          }
+          if (this.scrollOffset !== offset) {
+            this.scrollOffset = offset;
+            this.isScrolling = true;
+            this.scrollAdjustments = 0;
+            this.isScrollingTimeoutId = setTimeout(() => {
+              this.isScrollingTimeoutId = null;
+              this.isScrolling = false;
+              this.notify();
+            }, this.options.scrollingDelay);
+          } else {
+            this.isScrolling = false;
+            this.scrollAdjustments = 0;
+          }
+          this.calculateRange();
+        }));
+      } else if (!this.isScrolling) {
+        this.calculateRange();
+      }
+    };
+    this.getSize = () => {
+      return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
+    };
+    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
+        };
+      }
+      this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
+      debug: () => this.options.debug
+    });
+    this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
+      const range = calculateRange({
+        measurements,
+        outerSize,
+        scrollOffset
+      });
+      if (range.startIndex !== this.range.startIndex || range.endIndex !== this.range.endIndex) {
+        this.range = range;
+        this.notify();
+      }
+      return this.range;
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'calculateRange',
+      debug: () => this.options.debug
+    });
+    this.getIndexes = memo(() => [this.options.rangeExtractor, this.range, this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+      return rangeExtractor({
+        ...range,
+        overscan,
+        count: count
+      });
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+      debug: () => this.options.debug
+    });
+    this.indexFromElement = node => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = (node, _sync) => {
+      const index = this.indexFromElement(node);
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const prevNode = this.measureElementCache[item.key];
+      const ro = this.getResizeObserver();
+      if (!node.isConnected) {
+        if (prevNode) {
+          ro == null ? void 0 : ro.unobserve(prevNode);
+          delete this.measureElementCache[item.key];
+        }
+        return;
+      }
+      if (!prevNode || prevNode !== node) {
+        if (prevNode) {
+          ro == null ? void 0 : ro.unobserve(prevNode);
+        }
+        this.measureElementCache[item.key] = node;
+        ro == null ? void 0 : ro.observe(node);
+      }
+      const measuredItemSize = this.options.measureElement(node, this);
+      const itemSize = this.itemMeasurementsCache[item.key] ?? item.size;
+      const delta = measuredItemSize - itemSize;
+      if (delta !== 0) {
+        if (item.start < this.scrollOffset && this.isScrolling) {
+          if (process.env.NODE_ENV !== 'production' && this.options.debug) {
+            console.info('correction', delta);
+          }
+          this._scrollToOffset(this.scrollOffset, {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: undefined,
+            sync: false
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(index);
+        this.itemMeasurementsCache = {
+          ...this.itemMeasurementsCache,
+          [item.key]: measuredItemSize
+        };
+        this.notify();
+      }
+    };
+    this.measureElement = node => {
+      if (!node) {
+        return;
+      }
+      this._measureElement(node, true);
+    };
+    this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements()], (indexes, measurements) => {
+      const virtualItems = [];
+      for (let k = 0, len = indexes.length; k < len; k++) {
+        const i = indexes[k];
+        const measurement = measurements[i];
+        virtualItems.push(measurement);
+      }
+      return virtualItems;
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+      debug: () => this.options.debug
+    });
+    this.scrollToOffset = function (toOffset, _temp) {
+      let {
+        align = 'start',
+        behavior
+      } = _temp === void 0 ? {} : _temp;
+      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';
+        }
+      }
+      const options = {
+        adjustments: undefined,
+        behavior,
+        sync: false
+      };
+      if (align === 'start') {
+        _this._scrollToOffset(toOffset, options);
+      } else if (align === 'end') {
+        _this._scrollToOffset(toOffset - size, options);
+      } else if (align === 'center') {
+        _this._scrollToOffset(toOffset - size / 2, options);
+      }
+    };
+    this.scrollToIndex = function (index, _temp2) {
+      let {
+        align = 'auto',
+        ...rest
+      } = _temp2 === void 0 ? {} : _temp2;
+      _this.pendingScrollToIndexCallback = null;
+      const measurements = _this.getMeasurements();
+      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;
+        }
+      }
+      const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+      _this.scrollToOffset(toOffset, {
+        align,
+        ...rest
+      });
+      const isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      if (isDynamic) {
+        const didSeen = () => typeof _this.itemMeasurementsCache[_this.options.getItemKey(index)] === 'number';
+        if (!didSeen()) {
+          _this.pendingScrollToIndexCallback = () => {
+            if (didSeen()) {
+              _this.pendingScrollToIndexCallback = null;
+              _this.scrollToIndex(index, {
+                align,
+                ...rest
+              });
+            }
+          };
+        }
+      }
+    };
+    this.getTotalSize = () => {
+      var _this$getMeasurements;
+      return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
+    };
+    this._scrollToOffset = (offset, _ref4) => {
+      let {
+        adjustments,
+        behavior,
+        sync
+      } = _ref4;
+      this.options.scrollToFn(offset, {
+        behavior,
+        sync,
+        adjustments
+      }, this);
+    };
+    this.measure = () => {
+      this.itemMeasurementsCache = {};
+      this.notify();
+    };
+    this.setOptions(_opts);
+    this.scrollRect = this.options.initialRect;
+    this.scrollOffset = this.options.initialOffset;
+    this.calculateRange();
+  }
+}
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange(_ref5) {
+  let {
+    measurements,
+    outerSize,
+    scrollOffset
+  } = _ref5;
+  const count = measurements.length - 1;
+  const getOffset = index => measurements[index].start;
+  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+  let endIndex = startIndex;
+  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+    endIndex++;
+  }
+  return {
+    startIndex,
+    endIndex
+  };
+}
+
+/**
+ * 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
+ */
+
+//
+
+const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function useVirtualizerBase(options) {
+  const rerender = React__namespace.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: instance => {
+      rerender();
+      options.onChange == null ? void 0 : options.onChange(instance);
+    }
+  };
+  const [instance] = React__namespace.useState(() => new Virtualizer(resolvedOptions));
+  instance.setOptions(resolvedOptions);
+  React__namespace.useEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect$1(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
+}
+
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     var _a;
     const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
@@ -2331,7 +2912,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
-const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
+const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtualRow, }) => {
     const theme = styles.useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
@@ -2355,12 +2936,14 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
         }
         : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TableRow__default["default"], Object.assign({ hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
-                rowRef.current = node;
-                if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
-                    virtualRow.measureRef = node;
+        React__default["default"].createElement(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+                if (node) {
+                    rowRef.current = node;
+                    measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                 }
-            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
+            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
+                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                    : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${styles.lighten(theme.palette.background.default, 0.12)}`
@@ -2392,7 +2975,7 @@ const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.
 const MRT_TableBody = ({ table }) => {
     var _a, _b, _c;
     const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
-    const { columnFilters, globalFilter, pagination, sorting } = getState();
+    const { columnFilters, density, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2425,39 +3008,13 @@ const MRT_TableBody = ({ table }) => {
         pagination.pageSize,
     ]);
     const virtualizer = enableRowVirtualization
-        ? reactVirtual.useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
-        : {};
-    if (virtualizerInstanceRef) {
+        ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height, overscan: 10 }, vProps))
+        : undefined;
+    if (virtualizerInstanceRef && virtualizer) {
         virtualizerInstanceRef.current = virtualizer;
     }
-    // const virtualizer: Virtualizer = enableRowVirtualization
-    //   ? useVirtualizer({
-    //       count: rows.length,
-    //       estimateSize: () => (density === 'compact' ? 25 : 50),
-    //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-    //       overscan: 15,
-    //       ...vProps,
-    //     })
-    //   : ({} as any);
-    const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
-    // const virtualRows = enableRowVirtualization
-    //   ? virtualizer.getVirtualItems()
-    //   : [];
-    let paddingTop = 0;
-    let paddingBottom = 0;
-    if (enableRowVirtualization) {
-        paddingTop = virtualRows.length ? virtualRows[0].start : 0;
-        paddingBottom = virtualRows.length
-            ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-            : 0;
-    }
-    // if (enableRowVirtualization) {
-    //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
-    //   paddingBottom = !!virtualRows.length
-    //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
-    //     : 0;
-    // }
-    return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
+    const virtualRows = virtualizer ? virtualizer.getVirtualItems() : undefined;
+    return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: virtualizer ? `${virtualizer.getTotalSize()}px` : 'inherit', position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
             : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), ((_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : !rows.length) ? (React__default["default"].createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
         React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: { display: layoutMode === 'grid' ? 'grid' : 'table-cell' } },
@@ -2470,27 +3027,25 @@ const MRT_TableBody = ({ table }) => {
                     width: '100%',
                 } }, globalFilter || columnFilters.length
                 ? localization.noResultsFound
-                : localization.noRecordsToDisplay)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        enableRowVirtualization && paddingTop > 0 && (React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", { style: { height: `${paddingTop}px` } }))),
-        (enableRowVirtualization ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-            const row = enableRowVirtualization
-                ? rows[rowOrVirtualRow.index]
-                : rowOrVirtualRow;
-            const props = {
-                key: row.id,
-                numRows: rows.length,
-                row,
-                rowIndex: enableRowVirtualization
-                    ? rowOrVirtualRow.index
-                    : rowIndex,
-                table,
-                virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
-            };
-            return memoMode === 'rows' ? (React__default["default"].createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyRow, Object.assign({}, props)));
-        }),
-        enableRowVirtualization && paddingBottom > 0 && (React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", { style: { height: `${paddingBottom}px` } })))))));
+                : localization.noRecordsToDisplay)))) : (React__default["default"].createElement(React__default["default"].Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+        const row = virtualizer
+            ? rows[rowOrVirtualRow.index]
+            : rowOrVirtualRow;
+        const props = {
+            key: row.id,
+            measureElement: virtualizer
+                ? virtualizer.measureElement
+                : undefined,
+            numRows: rows.length,
+            row,
+            rowIndex: virtualizer ? rowOrVirtualRow.index : rowIndex,
+            table,
+            virtualRow: virtualizer
+                ? rowOrVirtualRow
+                : undefined,
+        };
+        return memoMode === 'rows' ? (React__default["default"].createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyRow, Object.assign({}, props)));
+    })))));
 };
 const Memo_MRT_TableBody = React.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
@@ -2588,11 +3143,13 @@ const MRT_TableContainer = ({ table }) => {
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (React__default["default"].createElement(TableContainer__default["default"], Object.assign({}, tableContainerProps, { ref: (ref) => {
-            tableContainerRef.current = ref;
-            if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
-                //@ts-ignore
-                tableContainerProps.ref.current = ref;
+    return (React__default["default"].createElement(TableContainer__default["default"], Object.assign({}, tableContainerProps, { ref: (node) => {
+            if (node) {
+                tableContainerRef.current = node;
+                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
+                    //@ts-ignore
+                    tableContainerProps.ref.current = node;
+                }
             }
         }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
@@ -2920,6 +3477,8 @@ const MaterialReactTable = (_a) => {
     const _sortingFns = React.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), []);
     const _defaultDisplayColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), []);
+    if (rest.enableRowVirtualization)
+        layoutMode = 'grid';
     return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };