material-react-table 1.4.0-beta.0 → 1.4.0-beta.2

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);
@@ -329,7 +347,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
         ? tableCellProps.sx(theme)
         : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { flex: table.options.layoutMode === 'grid'
             ? `${column.getSize()} 0 auto`
-            : undefined, maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
+            : undefined, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
 };
 const MRT_DefaultColumn = {
     minSize: 40,
@@ -1779,7 +1797,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { options: { icons: { FilterAltIcon }, localization, }, } = table;
+    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = columnDef.filterVariant === 'range' ||
@@ -1801,6 +1819,12 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         React__default["default"].createElement(Box__default["default"], { component: "span", sx: { flex: '0 0' } },
             React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip },
                 React__default["default"].createElement(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
+                        setShowFilters(true);
+                        queueMicrotask(() => {
+                            var _a, _b;
+                            (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
+                            (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
+                        });
                         event.stopPropagation();
                     }, size: "small", sx: {
                         height: '12px',
@@ -1965,11 +1989,11 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
         })
         : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', component: layoutMode === 'grid' ? 'div' : 'td', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
-        }, role: "columnheader" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
@@ -2041,7 +2065,7 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tr', role: "row" }, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', backgroundColor: styles.lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
             : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header) => (React__default["default"].createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table })))));
 };
@@ -2053,11 +2077,574 @@ const MRT_TableHead = ({ table }) => {
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
     const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
-    return (React__default["default"].createElement(TableHead__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'thead', role: "rowgroup" }, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+    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;
@@ -2266,7 +2853,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'td', role: "gridcell" }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2309,7 +2896,7 @@ 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 { getVisibleLeafColumns, getState, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
+    const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
@@ -2317,13 +2904,15 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps),
+    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
                 ? 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 }))))));
 };
 
-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();
@@ -2347,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({ component: layoutMode === 'grid' ? 'div' : 'tr', 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);
                 }
-            }, role: "row" }, 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)}`
@@ -2382,9 +2973,9 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
 const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
 
 const MRT_TableBody = ({ table }) => {
-    var _a, _b;
+    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;
@@ -2417,78 +3008,50 @@ 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({ component: layoutMode === 'grid' ? 'div' : 'tbody', role: "rowgroup" }, 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", null,
-        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length },
+            : 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' } },
             React__default["default"].createElement(Typography__default["default"], { sx: {
                     color: 'text.secondary',
                     fontStyle: 'italic',
-                    maxWidth: `min(100vw, ${(_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth}px)`,
+                    maxWidth: `min(100vw, ${(_c = (_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 360}px)`,
                     py: '2rem',
                     textAlign: 'center',
                     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);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
-    const { getState, options: { muiTableFooterCellProps }, } = table;
+    const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2500,7 +3063,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
+    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -2518,7 +3081,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
 
 const MRT_TableFooterRow = ({ footerGroup, table }) => {
     var _a;
-    const { options: { muiTableFooterRowProps }, } = table;
+    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
     // if no content in row, skip row
     if (!((_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
@@ -2527,17 +3090,19 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
+    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), footerGroup.headers.map((footer) => (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
 };
 
 const MRT_TableFooter = ({ table }) => {
-    const { getFooterGroups, getState, options: { enableStickyFooter, muiTableFooterProps }, } = table;
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = muiTableFooterProps instanceof Function
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React__default["default"].createElement(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+    return (React__default["default"].createElement(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
@@ -2552,7 +3117,7 @@ const MRT_Table = ({ table }) => {
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React__default["default"].createElement(Table__default["default"], Object.assign({ component: layoutMode === 'grid' ? 'div' : 'table', role: "grid", stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ 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 || 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
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default["default"].createElement(MRT_TableHead, { table: table }),
@@ -2578,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)`
@@ -2910,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)));
 };