material-react-table 0.9.1 → 0.9.4

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

@@ -5664,7 +5664,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React__default.createElement(MRT_LinearProgressBar, {
-    alignTo: 'top',
+    alignTo: "top",
     tableInstance: tableInstance
   }), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -6327,6 +6327,498 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }));
 };
 
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$2(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+
+var rectChanged = function rectChanged(a, b) {
+  if (a === void 0) {
+    a = {};
+  }
+
+  if (b === void 0) {
+    b = {};
+  }
+
+  return props.some(function (prop) {
+    return a[prop] !== b[prop];
+  });
+};
+
+var observedNodes = /*#__PURE__*/new Map();
+var rafId;
+
+var run = function run() {
+  var changedStates = [];
+  observedNodes.forEach(function (state, node) {
+    var newRect = node.getBoundingClientRect();
+
+    if (rectChanged(newRect, state.rect)) {
+      state.rect = newRect;
+      changedStates.push(state);
+    }
+  });
+  changedStates.forEach(function (state) {
+    state.callbacks.forEach(function (cb) {
+      return cb(state.rect);
+    });
+  });
+  rafId = window.requestAnimationFrame(run);
+};
+
+function observeRect(node, cb) {
+  return {
+    observe: function observe() {
+      var wasEmpty = observedNodes.size === 0;
+
+      if (observedNodes.has(node)) {
+        observedNodes.get(node).callbacks.push(cb);
+      } else {
+        observedNodes.set(node, {
+          rect: undefined,
+          hasRectChanged: false,
+          callbacks: [cb]
+        });
+      }
+
+      if (wasEmpty) run();
+    },
+    unobserve: function unobserve() {
+      var state = observedNodes.get(node);
+
+      if (state) {
+        // Remove the callback
+        var index = state.callbacks.indexOf(cb);
+        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
+
+        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
+
+        if (!observedNodes.size) cancelAnimationFrame(rafId);
+      }
+    }
+  };
+}
+
+var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
+
+function useRect(nodeRef, initialRect) {
+  if (initialRect === void 0) {
+    initialRect = {
+      width: 0,
+      height: 0
+    };
+  }
+
+  var _React$useState = React__default.useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
+
+  var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
+      rect = _React$useReducer[0],
+      dispatch = _React$useReducer[1];
+
+  var initialRectSet = React__default.useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
+    }
+  });
+  useIsomorphicLayoutEffect$1(function () {
+    if (element && !initialRectSet.current) {
+      initialRectSet.current = true;
+
+      var _rect = element.getBoundingClientRect();
+
+      dispatch({
+        rect: _rect
+      });
+    }
+  }, [element]);
+  React__default.useEffect(function () {
+    if (!element) {
+      return;
+    }
+
+    var observer = observeRect(element, function (rect) {
+      dispatch({
+        rect: rect
+      });
+    });
+    observer.observe();
+    return function () {
+      observer.unobserve();
+    };
+  }, [element]);
+  return rect;
+}
+
+function rectReducer(state, action) {
+  var rect = action.rect;
+
+  if (state.height !== rect.height || state.width !== rect.width) {
+    return rect;
+  }
+
+  return state;
+}
+
+var defaultEstimateSize = function defaultEstimateSize() {
+  return 50;
+};
+
+var defaultKeyExtractor = function defaultKeyExtractor(index) {
+  return index;
+};
+
+var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
+  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
+  return el[key];
+};
+
+var defaultRangeExtractor = function defaultRangeExtractor(range) {
+  var start = Math.max(range.start - range.overscan, 0);
+  var end = Math.min(range.end + range.overscan, range.size - 1);
+  var arr = [];
+
+  for (var i = start; i <= end; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+function useVirtual(_ref) {
+  var _measurements;
+
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 0 : _ref$size,
+      _ref$estimateSize = _ref.estimateSize,
+      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
+      _ref$overscan = _ref.overscan,
+      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
+      _ref$paddingStart = _ref.paddingStart,
+      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
+      _ref$paddingEnd = _ref.paddingEnd,
+      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
+      parentRef = _ref.parentRef,
+      horizontal = _ref.horizontal,
+      scrollToFn = _ref.scrollToFn,
+      useObserver = _ref.useObserver,
+      initialRect = _ref.initialRect,
+      onScrollElement = _ref.onScrollElement,
+      scrollOffsetFn = _ref.scrollOffsetFn,
+      _ref$keyExtractor = _ref.keyExtractor,
+      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
+      _ref$measureSize = _ref.measureSize,
+      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
+      _ref$rangeExtractor = _ref.rangeExtractor,
+      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
+  var sizeKey = horizontal ? 'width' : 'height';
+  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
+  var latestRef = React__default.useRef({
+    scrollOffset: 0,
+    measurements: []
+  });
+
+  var _React$useState = React__default.useState(0),
+      scrollOffset = _React$useState[0],
+      setScrollOffset = _React$useState[1];
+
+  latestRef.current.scrollOffset = scrollOffset;
+  var useMeasureParent = useObserver || useRect;
+
+  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
+      outerSize = _useMeasureParent[sizeKey];
+
+  latestRef.current.outerSize = outerSize;
+  var defaultScrollToFn = React__default.useCallback(function (offset) {
+    if (parentRef.current) {
+      parentRef.current[scrollKey] = offset;
+    }
+  }, [parentRef, scrollKey]);
+  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
+  scrollToFn = React__default.useCallback(function (offset) {
+    resolvedScrollToFn(offset, defaultScrollToFn);
+  }, [defaultScrollToFn, resolvedScrollToFn]);
+
+  var _React$useState2 = React__default.useState({}),
+      measuredCache = _React$useState2[0],
+      setMeasuredCache = _React$useState2[1];
+
+  var measure = React__default.useCallback(function () {
+    return setMeasuredCache({});
+  }, []);
+  var pendingMeasuredCacheIndexesRef = React__default.useRef([]);
+  var measurements = React__default.useMemo(function () {
+    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
+    pendingMeasuredCacheIndexesRef.current = [];
+    var measurements = latestRef.current.measurements.slice(0, min);
+
+    for (var i = min; i < size; i++) {
+      var key = keyExtractor(i);
+      var measuredSize = measuredCache[key];
+
+      var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+
+      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
+
+      var _end = _start + _size;
+
+      measurements[i] = {
+        index: i,
+        start: _start,
+        size: _size,
+        end: _end,
+        key: key
+      };
+    }
+
+    return measurements;
+  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
+  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
+  latestRef.current.measurements = measurements;
+  latestRef.current.totalSize = totalSize;
+  var element = onScrollElement ? onScrollElement.current : parentRef.current;
+  var scrollOffsetFnRef = React__default.useRef(scrollOffsetFn);
+  scrollOffsetFnRef.current = scrollOffsetFn;
+  useIsomorphicLayoutEffect$1(function () {
+    if (!element) {
+      setScrollOffset(0);
+      return;
+    }
+
+    var onScroll = function onScroll(event) {
+      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
+      setScrollOffset(offset);
+    };
+
+    onScroll();
+    element.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true
+    });
+    return function () {
+      element.removeEventListener('scroll', onScroll);
+    };
+  }, [element, scrollKey]);
+
+  var _calculateRange = calculateRange(latestRef.current),
+      start = _calculateRange.start,
+      end = _calculateRange.end;
+
+  var indexes = React__default.useMemo(function () {
+    return rangeExtractor({
+      start: start,
+      end: end,
+      overscan: overscan,
+      size: measurements.length
+    });
+  }, [start, end, overscan, measurements.length, rangeExtractor]);
+  var measureSizeRef = React__default.useRef(measureSize);
+  measureSizeRef.current = measureSize;
+  var virtualItems = React__default.useMemo(function () {
+    var virtualItems = [];
+
+    var _loop = function _loop(k, len) {
+      var i = indexes[k];
+      var measurement = measurements[i];
+
+      var item = _extends$1(_extends$1({}, measurement), {}, {
+        measureRef: function measureRef(el) {
+          if (el) {
+            var measuredSize = measureSizeRef.current(el, horizontal);
+
+            if (measuredSize !== item.size) {
+              var _scrollOffset = latestRef.current.scrollOffset;
+
+              if (item.start < _scrollOffset) {
+                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
+              }
+
+              pendingMeasuredCacheIndexesRef.current.push(i);
+              setMeasuredCache(function (old) {
+                var _extends2;
+
+                return _extends$1(_extends$1({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
+              });
+            }
+          }
+        }
+      });
+
+      virtualItems.push(item);
+    };
+
+    for (var k = 0, len = indexes.length; k < len; k++) {
+      _loop(k);
+    }
+
+    return virtualItems;
+  }, [indexes, defaultScrollToFn, horizontal, measurements]);
+  var mountedRef = React__default.useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (mountedRef.current) {
+      setMeasuredCache({});
+    }
+
+    mountedRef.current = true;
+  }, [estimateSize]);
+  var scrollToOffset = React__default.useCallback(function (toOffset, _temp) {
+    var _ref2 = _temp === void 0 ? {} : _temp,
+        _ref2$align = _ref2.align,
+        align = _ref2$align === void 0 ? 'start' : _ref2$align;
+
+    var _latestRef$current = latestRef.current,
+        scrollOffset = _latestRef$current.scrollOffset,
+        outerSize = _latestRef$current.outerSize;
+
+    if (align === 'auto') {
+      if (toOffset <= scrollOffset) {
+        align = 'start';
+      } else if (toOffset >= scrollOffset + outerSize) {
+        align = 'end';
+      } else {
+        align = 'start';
+      }
+    }
+
+    if (align === 'start') {
+      scrollToFn(toOffset);
+    } else if (align === 'end') {
+      scrollToFn(toOffset - outerSize);
+    } else if (align === 'center') {
+      scrollToFn(toOffset - outerSize / 2);
+    }
+  }, [scrollToFn]);
+  var tryScrollToIndex = React__default.useCallback(function (index, _temp2) {
+    var _ref3 = _temp2 === void 0 ? {} : _temp2,
+        _ref3$align = _ref3.align,
+        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
+        rest = _objectWithoutPropertiesLoose$2(_ref3, ["align"]);
+
+    var _latestRef$current2 = latestRef.current,
+        measurements = _latestRef$current2.measurements,
+        scrollOffset = _latestRef$current2.scrollOffset,
+        outerSize = _latestRef$current2.outerSize;
+    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
+
+    if (!measurement) {
+      return;
+    }
+
+    if (align === 'auto') {
+      if (measurement.end >= scrollOffset + outerSize) {
+        align = 'end';
+      } else if (measurement.start <= scrollOffset) {
+        align = 'start';
+      } else {
+        return;
+      }
+    }
+
+    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
+    scrollToOffset(toOffset, _extends$1({
+      align: align
+    }, rest));
+  }, [scrollToOffset, size]);
+  var scrollToIndex = React__default.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // We do a double request here because of
+    // dynamic sizes which can cause offset shift
+    // and end up in the wrong spot. Unfortunately,
+    // we can't know about those dynamic sizes until
+    // we try and render them. So double down!
+    tryScrollToIndex.apply(void 0, args);
+    requestAnimationFrame(function () {
+      tryScrollToIndex.apply(void 0, args);
+    });
+  }, [tryScrollToIndex]);
+  return {
+    virtualItems: virtualItems,
+    totalSize: totalSize,
+    scrollToOffset: scrollToOffset,
+    scrollToIndex: scrollToIndex,
+    measure: measure
+  };
+}
+
+var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
+  while (low <= high) {
+    var middle = (low + high) / 2 | 0;
+    var 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(_ref4) {
+  var measurements = _ref4.measurements,
+      outerSize = _ref4.outerSize,
+      scrollOffset = _ref4.scrollOffset;
+  var size = measurements.length - 1;
+
+  var getOffset = function getOffset(index) {
+    return measurements[index].start;
+  };
+
+  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
+  var end = start;
+
+  while (end < size && measurements[end].end < scrollOffset + outerSize) {
+    end++;
+  }
+
+  return {
+    start: start,
+    end: end
+  };
+}
+
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var cell = _ref.cell,
       tableInstance = _ref.tableInstance;
@@ -6483,17 +6975,22 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
+      rowIndex = _ref.rowIndex,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableEditing = _tableInstance$option.enableEditing,
-      tableId = _tableInstance$option.tableId,
+      enableRowNumbers = _tableInstance$option.enableRowNumbers,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
       onMrtCellClick = _tableInstance$option.onMrtCellClick,
+      rowNumberMode = _tableInstance$option.rowNumberMode,
+      tableId = _tableInstance$option.tableId,
       setColumnOrder = tableInstance.setColumnOrder,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell;
 
@@ -6569,7 +7066,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         tableInstance: tableInstance
       });
     },
-    onDoubleClick: handleDoubleClick
+    onDoubleClick: handleDoubleClick,
+    title: (enableRowVirtualization || enableColumnResizing) && !(columnDef != null && columnDef.Cell) && !cell.getIsGrouped() && !columnDef.enableClickToCopy && typeof cell.getValue() === 'string' ? cell.getValue() : ''
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
@@ -6578,10 +7076,12 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
+        overflow: 'hidden',
         p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
+        textOverflow: 'ellipsis',
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
@@ -6599,7 +7099,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
+  }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React__default.createElement(MRT_EditCellTextField, {
@@ -6660,6 +7160,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
 
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row,
+      rowIndex = _ref.rowIndex,
       tableInstance = _ref.tableInstance;
   var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       _tableInstance$option = tableInstance.options,
@@ -6695,6 +7196,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       cell: cell,
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
+      rowIndex: rowIndex,
       tableInstance: tableInstance
     });
   })), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
@@ -6704,23 +7206,48 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var tableInstance = _ref.tableInstance,
+      tableContainerRef = _ref.tableContainerRef;
   var getPaginationRowModel = tableInstance.getPaginationRowModel,
       getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
+      getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enablePagination = _tableInstance$option.enablePagination,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
-  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     tableInstance: tableInstance
   }) : muiTableBodyProps;
-  return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
+  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+  var rowVirtualizer = enableRowVirtualization ? useVirtual({
+    overscan: isDensePadding ? 15 : 5,
+    size: rows.length,
+    parentRef: tableContainerRef
+  }) : {};
+  var virtualRows = rowVirtualizer.virtualItems;
+  var paddingTop = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? virtualRows[0].start : 0;
+  var paddingBottom = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
+  return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
+    style: {
+      height: paddingTop + "px"
+    }
+  })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow, rowIndex) {
+    var row = enableRowVirtualization ? rows[rowOrVirtualRow.index] : rowOrVirtualRow;
     return React__default.createElement(MRT_TableBodyRow, {
       key: row.id,
       row: row,
+      rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
       tableInstance: tableInstance
     });
-  }));
+  }), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
+    style: {
+      height: paddingBottom + "px"
+    }
+  })));
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
@@ -6814,8 +7341,11 @@ var MRT_TableFooter = function MRT_TableFooter(_ref) {
 };
 
 var MRT_Table = function MRT_Table(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var tableContainerRef = _ref.tableContainerRef,
+      tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
       enableTableHead = _tableInstance$option.enableTableHead,
@@ -6825,23 +7355,28 @@ var MRT_Table = function MRT_Table(_ref) {
   }) : muiTableProps;
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader
-  }, tableProps), enableTableHead && React__default.createElement(MRT_TableHead, {
+  }, tableProps, {
+    sx: _extends({
+      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined
+    }, tableProps == null ? void 0 : tableProps.sx)
+  }), enableTableHead && React__default.createElement(MRT_TableHead, {
     tableInstance: tableInstance
   }), React__default.createElement(MRT_TableBody, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }), enableTableFooter && React__default.createElement(MRT_TableFooter, {
     tableInstance: tableInstance
   }));
 };
 
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      tableId = _tableInstance$option.tableId,
-      muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
+      muiTableContainerProps = _tableInstance$option.muiTableContainerProps,
+      tableId = _tableInstance$option.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -6853,14 +7388,16 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
     tableInstance: tableInstance
   }) : muiTableContainerProps;
-  useIsomorphicLayoutEffect$1(function () {
+  useIsomorphicLayoutEffect$2(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
 
     var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + tableId + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
     var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + tableId + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
+  var tableContainerRef = React__default.useRef(null);
   return React__default.createElement(material.TableContainer, Object.assign({}, tableContainerProps, {
+    ref: tableContainerRef,
     sx: _extends({
       maxWidth: '100%',
       maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
@@ -6870,6 +7407,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
   }), React__default.createElement(MRT_Table, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }));
 };
@@ -7183,7 +7721,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -7191,9 +7729,9 @@ var MaterialReactTable = (function (_ref) {
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
       _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
-    minSize: 50,
+    minSize: 30,
     maxSize: 1000,
-    size: 150
+    size: 180
   } : _ref$defaultColumn,
       _ref$editingMode = _ref.editingMode,
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
@@ -7255,6 +7793,8 @@ var MaterialReactTable = (function (_ref) {
       positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
       _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
       positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
+      _ref$rowNumberMode = _ref.rowNumberMode,
+      rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
       _ref$selectAllMode = _ref.selectAllMode,
       selectAllMode = _ref$selectAllMode === void 0 ? 'all' : _ref$selectAllMode,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
@@ -7294,6 +7834,7 @@ var MaterialReactTable = (function (_ref) {
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
+    rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode
   }, rest));
 });