material-react-table 1.4.0-beta.4 → 1.4.1

package/dist/cjs/index.js

@@ -71,6 +71,7 @@ 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('@tanstack/react-virtual');
 var TableBody = require('@mui/material/TableBody');
 var Skeleton = require('@mui/material/Skeleton');
 var TableFooter = require('@mui/material/TableFooter');
@@ -81,26 +82,7 @@ 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);
@@ -1392,7 +1374,7 @@ const MRT_ToolbarInternalButtons = ({ table, }) => {
         enableFullScreenToggle && (React__default["default"].createElement(MRT_FullScreenToggleButton, { table: table }))))));
 };
 
-const MRT_ToolbarDropZone = ({ table }) => {
+const MRT_ToolbarDropZone = ({ table, }) => {
     var _a, _b;
     const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
     const { draggingColumn, hoveredColumn, grouping } = getState();
@@ -2071,580 +2053,17 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
 };
 
 const MRT_TableHead = ({ table }) => {
-    const { getHeaderGroups, getState, options: { enableRowVirtualization, enableStickyHeader, layoutMode, muiTableHeadProps, }, } = table;
+    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, } = table;
     const { isFullScreen } = getState();
     const tableHeadProps = muiTableHeadProps instanceof Function
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
-    const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
+    const stickyHeader = enableStickyHeader || isFullScreen;
     return (React__default["default"].createElement(TableHead__default["default"], Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
             : 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;
@@ -2895,19 +2314,28 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
 };
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
-const MRT_TableDetailPanel = ({ row, table }) => {
+const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
     const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({ row, table })
+        ? muiTableBodyRowProps({ isDetailPanel: true, row, table })
         : muiTableBodyRowProps;
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({ sx: {
-            display: layoutMode === 'grid' ? 'flex' : 'table-row',
-        } }, tableRowProps),
-        React__default["default"].createElement(TableCell__default["default"], Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
+            var _a, _b;
+            return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
+                    ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
+                    : undefined, transform: virtualRow
+                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                    : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+                ? tableRowProps.sx(theme)
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)));
+        } }),
+        React__default["default"].createElement(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
+                    ? styles.lighten(theme.palette.background.default, 0.06)
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
                 : 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 }))))));
 };
@@ -2968,7 +2396,7 @@ const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtu
                 (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
                 (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React__default["default"].createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyCell, Object.assign({}, props)));
         })),
-        renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { row: row, table: table }))));
+        renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, table: table, virtualRow: virtualRow }))));
 };
 const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
 
@@ -3008,7 +2436,7 @@ const MRT_TableBody = ({ table }) => {
         pagination.pageSize,
     ]);
     const virtualizer = enableRowVirtualization
-        ? 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))
+        ? reactVirtual.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: 4 }, vProps))
         : undefined;
     if (virtualizerInstanceRef && virtualizer) {
         virtualizerInstanceRef.current = virtualizer;
@@ -3112,12 +2540,12 @@ const MRT_TableFooter = ({ table }) => {
 };
 
 const MRT_Table = ({ table }) => {
-    const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
+    const { getState, options: { enableColumnResizing, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
     const { isFullScreen } = getState();
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React__default["default"].createElement(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    return (React__default["default"].createElement(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default["default"].createElement(MRT_TableHead, { table: table }),
@@ -3127,7 +2555,7 @@ const MRT_Table = ({ table }) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 const MRT_TableContainer = ({ table }) => {
-    const { getState, options: { enableStickyHeader, enableRowVirtualization, muiTableContainerProps, }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
+    const { getState, options: { enableStickyHeader, muiTableContainerProps }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const [totalToolbarHeight, setTotalToolbarHeight] = React.useState(0);
     const tableContainerProps = muiTableContainerProps instanceof Function
@@ -3151,7 +2579,7 @@ const MRT_TableContainer = ({ table }) => {
                     tableContainerProps.ref.current = node;
                 }
             }
-        }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
+        }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
                 : undefined, overflow: 'auto' }, ((tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) instanceof Function
             ? tableContainerProps.sx(theme)
@@ -3477,8 +2905,10 @@ 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)
+    if (rest.enableRowVirtualization) {
         layoutMode = 'grid';
+        enableStickyHeader = true;
+    }
     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)));
 };
 
@@ -3491,6 +2921,8 @@ exports.MRT_TablePagination = MRT_TablePagination;
 exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
 exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
 exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
+exports.MRT_ToolbarAlertBanner = MRT_ToolbarAlertBanner;
+exports.MRT_ToolbarDropZone = MRT_ToolbarDropZone;
 exports.MRT_ToolbarInternalButtons = MRT_ToolbarInternalButtons;
 exports["default"] = MaterialReactTable;
 //# sourceMappingURL=index.js.map