material-react-table 0.9.2 → 0.9.3

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,559 +6327,183 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }));
 };
 
-var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
-  var cell = _ref.cell,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      tableId = _tableInstance$option.tableId,
-      enableEditing = _tableInstance$option.enableEditing,
-      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
-      onMrtCellEditBlur = _tableInstance$option.onMrtCellEditBlur,
-      onMrtCellEditChange = _tableInstance$option.onMrtCellEditChange,
-      setCurrentEditingCell = tableInstance.setCurrentEditingCell,
-      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
-
-  var _useState = React.useState(cell.getValue()),
-      value = _useState[0],
-      setValue = _useState[1];
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  var column = cell.column,
-      row = cell.row;
-  var columnDef = column.columnDef;
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-  var handleChange = function handleChange(event) {
-    setValue(event.target.value);
-    columnDef.onMrtCellEditChange == null ? void 0 : columnDef.onMrtCellEditChange({
-      event: event,
-      cell: cell,
-      tableInstance: tableInstance
-    });
-    onMrtCellEditChange == null ? void 0 : onMrtCellEditChange({
-      event: event,
-      cell: cell,
-      tableInstance: tableInstance
-    });
+    return target;
   };
 
-  var handleBlur = function handleBlur(event) {
-    if (getState().currentEditingRow) {
-      if (!row._valuesCache) row._valuesCache = {};
-      row._valuesCache[column.id] = value;
-      setCurrentEditingRow(_extends({}, getState().currentEditingRow));
-    }
+  return _extends$1.apply(this, arguments);
+}
 
-    setCurrentEditingCell(null);
-    columnDef.onMrtCellEditBlur == null ? void 0 : columnDef.onMrtCellEditBlur({
-      event: event,
-      cell: cell,
-      tableInstance: tableInstance
-    });
-    onMrtCellEditBlur == null ? void 0 : onMrtCellEditBlur({
-      event: event,
-      cell: cell,
-      tableInstance: tableInstance
-    });
-  };
+function _objectWithoutPropertiesLoose$2(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
-    cell: cell,
-    tableInstance: tableInstance
-  }) : muiTableBodyCellEditTextFieldProps;
-  var mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function ? columnDef.muiTableBodyCellEditTextFieldProps({
-    cell: cell,
-    tableInstance: tableInstance
-  }) : columnDef.muiTableBodyCellEditTextFieldProps;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
 
-  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
+  return target;
+}
 
-  if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
-    return React__default.createElement(React__default.Fragment, null, columnDef.Edit == null ? void 0 : columnDef.Edit({
-      cell: cell,
-      tableInstance: tableInstance
-    }));
+var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+
+var rectChanged = function rectChanged(a, b) {
+  if (a === void 0) {
+    a = {};
   }
 
-  return React__default.createElement(material.TextField, Object.assign({
-    id: "mrt-" + tableId + "-edit-cell-text-field-" + cell.id,
-    margin: "dense",
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    placeholder: columnDef.header,
-    value: value,
-    variant: "standard"
-  }, textFieldProps));
+  if (b === void 0) {
+    b = {};
+  }
+
+  return props.some(function (prop) {
+    return a[prop] !== b[prop];
+  });
 };
 
-var MRT_CopyButton = function MRT_CopyButton(_ref) {
-  var cell = _ref.cell,
-      children = _ref.children,
-      tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      localization = _tableInstance$option.localization,
-      muiTableBodyCellCopyButtonProps = _tableInstance$option.muiTableBodyCellCopyButtonProps;
-  var column = cell.column;
-  var columnDef = column.columnDef;
+var observedNodes = /*#__PURE__*/new Map();
+var rafId;
 
-  var _useState = React.useState(false),
-      copied = _useState[0],
-      setCopied = _useState[1];
+var run = function run() {
+  var changedStates = [];
+  observedNodes.forEach(function (state, node) {
+    var newRect = node.getBoundingClientRect();
 
-  var handleCopy = function handleCopy(text) {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(function () {
-      return setCopied(false);
-    }, 4000);
-  };
+    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);
+};
 
-  var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps({
-    cell: cell,
-    tableInstance: tableInstance
-  }) : muiTableBodyCellCopyButtonProps;
-  var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
-    cell: cell,
-    tableInstance: tableInstance
-  }) : columnDef.muiTableBodyCellCopyButtonProps;
+function observeRect(node, cb) {
+  return {
+    observe: function observe() {
+      var wasEmpty = observedNodes.size === 0;
 
-  var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
+      if (observedNodes.has(node)) {
+        observedNodes.get(node).callbacks.push(cb);
+      } else {
+        observedNodes.set(node, {
+          rect: undefined,
+          hasRectChanged: false,
+          callbacks: [cb]
+        });
+      }
 
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: copied ? localization.copiedToClipboard : localization.clickToCopy
-  }, React__default.createElement(material.Button, Object.assign({
-    "aria-label": localization.clickToCopy,
-    onClick: function onClick() {
-      return handleCopy(cell.getValue());
+      if (wasEmpty) run();
     },
-    size: "small",
-    type: "button",
-    variant: "text"
-  }, buttonProps, {
-    sx: _extends({
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: 'inherit',
-      cursor: 'copy',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      letterSpacing: 'inherit',
-      m: '-0.25rem',
-      minWidth: 'unset',
-      textAlign: 'inherit',
-      textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx)
-  }), children));
-};
+    unobserve: function unobserve() {
+      var state = observedNodes.get(node);
 
-var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
+      if (state) {
+        // Remove the callback
+        var index = state.callbacks.indexOf(cb);
+        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
 
-  var cell = _ref.cell,
-      enableHover = _ref.enableHover,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      editingMode = _tableInstance$option.editingMode,
-      enableClickToCopy = _tableInstance$option.enableClickToCopy,
-      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      enableEditing = _tableInstance$option.enableEditing,
-      tableId = _tableInstance$option.tableId,
-      muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
-      onMrtCellClick = _tableInstance$option.onMrtCellClick,
-      setColumnOrder = tableInstance.setColumnOrder,
-      setCurrentEditingCell = tableInstance.setCurrentEditingCell;
+        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
 
-  var _getState = getState(),
-      columnOrder = _getState.columnOrder,
-      currentEditingCell = _getState.currentEditingCell,
-      currentEditingRow = _getState.currentEditingRow,
-      isDensePadding = _getState.isDensePadding,
-      isLoading = _getState.isLoading,
-      showSkeletons = _getState.showSkeletons;
+        if (!observedNodes.size) cancelAnimationFrame(rafId);
+      }
+    }
+  };
+}
 
-  var column = cell.column,
-      row = cell.row;
-  var columnDef = column.columnDef,
-      columnDefType = column.columnDefType;
+var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
 
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
+function useRect(nodeRef, initialRect) {
+  if (initialRect === void 0) {
+    initialRect = {
+      width: 0,
+      height: 0
+    };
+  }
 
-  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
-    cell: cell,
-    tableInstance: tableInstance
-  }) : muiTableBodyCellProps;
-  var mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function ? columnDef.muiTableBodyCellProps({
-    cell: cell,
-    tableInstance: tableInstance
-  }) : columnDef.muiTableBodyCellProps;
-
-  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
-
-  var skeletonWidth = React.useMemo(function () {
-    return columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
-  }, [columnDefType, column.getSize()]);
-  var isEditable = (enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false;
-  var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
+  var _React$useState = React__default.useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
 
-  var handleDoubleClick = function handleDoubleClick(_event) {
-    if ((enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false && editingMode === 'cell') {
-      setCurrentEditingCell(cell);
-      setTimeout(function () {
-        var textField = document.getElementById("mrt-" + tableId + "-edit-cell-text-field-" + cell.id);
+  var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
+      rect = _React$useReducer[0],
+      dispatch = _React$useReducer[1];
 
-        if (textField) {
-          textField.focus();
-          textField.select();
-        }
-      }, 200);
+  var initialRectSet = React__default.useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
     }
-  };
-
-  var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
-    return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
-  };
-
-  var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
-    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-  };
+  });
+  useIsomorphicLayoutEffect$1(function () {
+    if (element && !initialRectSet.current) {
+      initialRectSet.current = true;
 
-  var getTotalRight = function getTotalRight() {
-    return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
-  };
+      var _rect = element.getBoundingClientRect();
 
-  return React__default.createElement(material.TableCell, Object.assign({
-    onClick: function onClick(event) {
-      return onMrtCellClick == null ? void 0 : onMrtCellClick({
-        event: event,
-        cell: cell,
-        tableInstance: tableInstance
+      dispatch({
+        rect: _rect
       });
-    },
-    onDoubleClick: handleDoubleClick
-  }, tableCellProps, {
-    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
-    sx: function sx(theme) {
-      return _extends({
-        backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
-        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,
-        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,
-        transition: 'all 0.2s ease-in-out',
-        whiteSpace: isDensePadding ? 'nowrap' : 'normal',
-        zIndex: column.getIsPinned() ? 1 : undefined,
-        '&:hover': {
-          backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
-        }
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
-    },
-    style: {
-      maxWidth: "min(" + column.getSize() + "px, fit-content)",
-      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: column.getSize()
     }
-  }), React__default.createElement(React__default.Fragment, null, isLoading || showSkeletons ? React__default.createElement(material.Skeleton, Object.assign({
-    animation: "wave",
-    height: 20,
-    width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : 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, {
-    cell: cell,
-    tableInstance: tableInstance
-  }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
-    cell: cell,
-    tableInstance: tableInstance
-  }, React__default.createElement(React__default.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
-    cell: cell,
-    tableInstance: tableInstance
-  })) != null ? _columnDef$Cell : cell.renderCell())), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
-    cell: cell,
-    tableInstance: tableInstance
-  })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
-};
-
-var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
-  var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getVisibleFlatColumns = tableInstance.getVisibleFlatColumns,
-      _tableInstance$option = tableInstance.options,
-      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
-      muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
-      onMrtDetailPanelClick = _tableInstance$option.onMrtDetailPanelClick,
-      renderDetailPanel = _tableInstance$option.renderDetailPanel;
-  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
-    row: row,
-    tableInstance: tableInstance
-  }) : muiTableBodyRowProps;
-  var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps({
-    row: row,
-    tableInstance: tableInstance
-  }) : muiTableDetailPanelProps;
-  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
-    colSpan: getVisibleFlatColumns().length + 10,
-    onClick: function onClick(event) {
-      return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
-        event: event,
-        row: row,
-        tableInstance: tableInstance
-      });
+  }, [element]);
+  React__default.useEffect(function () {
+    if (!element) {
+      return;
     }
-  }, tableCellProps, {
-    sx: _extends({
-      borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-      pb: row.getIsExpanded() ? '1rem' : 0,
-      pt: row.getIsExpanded() ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out'
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), React__default.createElement(material.Collapse, {
-    "in": row.getIsExpanded()
-  }, renderDetailPanel == null ? void 0 : renderDetailPanel({
-    row: row,
-    tableInstance: tableInstance
-  }))));
-};
 
-var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
-  var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
-      _tableInstance$option = tableInstance.options,
-      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
-      onMrtRowClick = _tableInstance$option.onMrtRowClick,
-      renderDetailPanel = _tableInstance$option.renderDetailPanel;
-  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
-    row: row,
-    tableInstance: tableInstance
-  }) : muiTableBodyRowProps;
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
-    hover: true,
-    onClick: function onClick(event) {
-      return onMrtRowClick == null ? void 0 : onMrtRowClick({
-        event: event,
-        row: row,
-        tableInstance: tableInstance
+    var observer = observeRect(element, function (rect) {
+      dispatch({
+        rect: rect
       });
-    },
-    selected: row.getIsSelected()
-  }, tableRowProps, {
-    sx: function sx(theme) {
-      return _extends({
-        backgroundColor: material.lighten(theme.palette.background["default"], 0.06),
-        transition: 'all 0.2s ease-in-out',
-        '&:hover td': {
-          backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
-        }
-      }, tableRowProps == null ? void 0 : tableRowProps.sx);
-    }
-  }), row.getVisibleCells().map(function (cell) {
-    return React__default.createElement(MRT_TableBodyCell, {
-      cell: cell,
-      key: cell.id,
-      enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
-      tableInstance: tableInstance
     });
-  })), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
-    row: row,
-    tableInstance: tableInstance
-  }));
-};
-
-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);
+    observer.observe();
+    return function () {
+      observer.unobserve();
+    };
+  }, [element]);
+  return rect;
 }
 
-function _objectWithoutPropertiesLoose$2(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+function rectReducer(state, action) {
+  var rect = action.rect;
 
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  if (state.height !== rect.height || state.width !== rect.width) {
+    return rect;
   }
 
-  return target;
+  return state;
 }
 
-var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
-
-var rectChanged = function rectChanged(a, b) {
-  if (a === void 0) {
-    a = {};
-  }
+var defaultEstimateSize = function defaultEstimateSize() {
+  return 50;
+};
 
-  if (b === void 0) {
-    b = {};
-  }
+var defaultKeyExtractor = function defaultKeyExtractor(index) {
+  return index;
+};
 
-  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 defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
+  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
+  return el[key];
 };
 
 var defaultRangeExtractor = function defaultRangeExtractor(range) {
@@ -7108,92 +6732,473 @@ function useVirtual(_ref) {
         outerSize = _latestRef$current2.outerSize;
     var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
 
-    if (!measurement) {
-      return;
+    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;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      tableId = _tableInstance$option.tableId,
+      enableEditing = _tableInstance$option.enableEditing,
+      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
+      onMrtCellEditBlur = _tableInstance$option.onMrtCellEditBlur,
+      onMrtCellEditChange = _tableInstance$option.onMrtCellEditChange,
+      setCurrentEditingCell = tableInstance.setCurrentEditingCell,
+      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+
+  var _useState = React.useState(cell.getValue()),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var column = cell.column,
+      row = cell.row;
+  var columnDef = column.columnDef;
+
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+    columnDef.onMrtCellEditChange == null ? void 0 : columnDef.onMrtCellEditChange({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
+    onMrtCellEditChange == null ? void 0 : onMrtCellEditChange({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
+  };
+
+  var handleBlur = function handleBlur(event) {
+    if (getState().currentEditingRow) {
+      if (!row._valuesCache) row._valuesCache = {};
+      row._valuesCache[column.id] = value;
+      setCurrentEditingRow(_extends({}, getState().currentEditingRow));
+    }
+
+    setCurrentEditingCell(null);
+    columnDef.onMrtCellEditBlur == null ? void 0 : columnDef.onMrtCellEditBlur({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
+    onMrtCellEditBlur == null ? void 0 : onMrtCellEditBlur({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
+  };
+
+  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : muiTableBodyCellEditTextFieldProps;
+  var mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function ? columnDef.muiTableBodyCellEditTextFieldProps({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : columnDef.muiTableBodyCellEditTextFieldProps;
+
+  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
+
+  if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+    return React__default.createElement(React__default.Fragment, null, columnDef.Edit == null ? void 0 : columnDef.Edit({
+      cell: cell,
+      tableInstance: tableInstance
+    }));
+  }
+
+  return React__default.createElement(material.TextField, Object.assign({
+    id: "mrt-" + tableId + "-edit-cell-text-field-" + cell.id,
+    margin: "dense",
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    placeholder: columnDef.header,
+    value: value,
+    variant: "standard"
+  }, textFieldProps));
+};
+
+var MRT_CopyButton = function MRT_CopyButton(_ref) {
+  var cell = _ref.cell,
+      children = _ref.children,
+      tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      localization = _tableInstance$option.localization,
+      muiTableBodyCellCopyButtonProps = _tableInstance$option.muiTableBodyCellCopyButtonProps;
+  var column = cell.column;
+  var columnDef = column.columnDef;
+
+  var _useState = React.useState(false),
+      copied = _useState[0],
+      setCopied = _useState[1];
+
+  var handleCopy = function handleCopy(text) {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(function () {
+      return setCopied(false);
+    }, 4000);
+  };
+
+  var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : muiTableBodyCellCopyButtonProps;
+  var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : columnDef.muiTableBodyCellCopyButtonProps;
+
+  var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
+
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: copied ? localization.copiedToClipboard : localization.clickToCopy
+  }, React__default.createElement(material.Button, Object.assign({
+    "aria-label": localization.clickToCopy,
+    onClick: function onClick() {
+      return handleCopy(cell.getValue());
+    },
+    size: "small",
+    type: "button",
+    variant: "text"
+  }, buttonProps, {
+    sx: _extends({
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: 'inherit',
+      cursor: 'copy',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      m: '-0.25rem',
+      minWidth: 'unset',
+      textAlign: 'inherit',
+      textTransform: 'inherit'
+    }, buttonProps == null ? void 0 : buttonProps.sx)
+  }), children));
+};
+
+var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
+  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
+
+  var cell = _ref.cell,
+      enableHover = _ref.enableHover,
+      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,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
+      muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
+      onMrtCellClick = _tableInstance$option.onMrtCellClick,
+      tableId = _tableInstance$option.tableId,
+      setColumnOrder = tableInstance.setColumnOrder,
+      setCurrentEditingCell = tableInstance.setCurrentEditingCell;
+
+  var _getState = getState(),
+      columnOrder = _getState.columnOrder,
+      currentEditingCell = _getState.currentEditingCell,
+      currentEditingRow = _getState.currentEditingRow,
+      isDensePadding = _getState.isDensePadding,
+      isLoading = _getState.isLoading,
+      showSkeletons = _getState.showSkeletons;
+
+  var column = cell.column,
+      row = cell.row;
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
+
+  var _useDrop = useDrop({
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
     }
+  }),
+      dropRef = _useDrop[1];
 
-    if (align === 'auto') {
-      if (measurement.end >= scrollOffset + outerSize) {
-        align = 'end';
-      } else if (measurement.start <= scrollOffset) {
-        align = 'start';
-      } else {
-        return;
-      }
-    }
+  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : muiTableBodyCellProps;
+  var mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function ? columnDef.muiTableBodyCellProps({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : columnDef.muiTableBodyCellProps;
 
-    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];
-    }
+  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
 
-    // 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 skeletonWidth = React.useMemo(function () {
+    return columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
+  }, [columnDefType, column.getSize()]);
+  var isEditable = (enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false;
+  var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
 
-var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
-  while (low <= high) {
-    var middle = (low + high) / 2 | 0;
-    var currentValue = getCurrentValue(middle);
+  var handleDoubleClick = function handleDoubleClick(_event) {
+    if ((enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false && editingMode === 'cell') {
+      setCurrentEditingCell(cell);
+      setTimeout(function () {
+        var textField = document.getElementById("mrt-" + tableId + "-edit-cell-text-field-" + cell.id);
 
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
+        if (textField) {
+          textField.focus();
+          textField.select();
+        }
+      }, 200);
     }
-  }
+  };
 
-  if (low > 0) {
-    return low - 1;
-  } else {
-    return 0;
-  }
-};
+  var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
+    return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+  };
 
-function calculateRange(_ref4) {
-  var measurements = _ref4.measurements,
-      outerSize = _ref4.outerSize,
-      scrollOffset = _ref4.scrollOffset;
-  var size = measurements.length - 1;
+  var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  };
 
-  var getOffset = function getOffset(index) {
-    return measurements[index].start;
+  var getTotalRight = function getTotalRight() {
+    return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
-  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
-  var end = start;
+  return React__default.createElement(material.TableCell, Object.assign({
+    onClick: function onClick(event) {
+      return onMrtCellClick == null ? void 0 : onMrtCellClick({
+        event: event,
+        cell: cell,
+        tableInstance: tableInstance
+      });
+    },
+    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) {
+      return _extends({
+        backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
+        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,
+        '&:hover': {
+          backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
+        }
+      }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+      width: column.getSize()
+    }
+  }), React__default.createElement(React__default.Fragment, null, isLoading || showSkeletons ? React__default.createElement(material.Skeleton, Object.assign({
+    animation: "wave",
+    height: 20,
+    width: skeletonWidth
+  }, muiTableBodyCellSkeletonProps)) : 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, {
+    cell: cell,
+    tableInstance: tableInstance
+  }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
+    cell: cell,
+    tableInstance: tableInstance
+  }, React__default.createElement(React__default.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
+    cell: cell,
+    tableInstance: tableInstance
+  })) != null ? _columnDef$Cell : cell.renderCell())), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
+    cell: cell,
+    tableInstance: tableInstance
+  })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
+};
 
-  while (end < size && measurements[end].end < scrollOffset + outerSize) {
-    end++;
-  }
+var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getVisibleFlatColumns = tableInstance.getVisibleFlatColumns,
+      _tableInstance$option = tableInstance.options,
+      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
+      muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
+      onMrtDetailPanelClick = _tableInstance$option.onMrtDetailPanelClick,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
+    row: row,
+    tableInstance: tableInstance
+  }) : muiTableBodyRowProps;
+  var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps({
+    row: row,
+    tableInstance: tableInstance
+  }) : muiTableDetailPanelProps;
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
+    colSpan: getVisibleFlatColumns().length + 10,
+    onClick: function onClick(event) {
+      return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
+        event: event,
+        row: row,
+        tableInstance: tableInstance
+      });
+    }
+  }, tableCellProps, {
+    sx: _extends({
+      borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+      pb: row.getIsExpanded() ? '1rem' : 0,
+      pt: row.getIsExpanded() ? '1rem' : 0,
+      transition: 'all 0.2s ease-in-out'
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), React__default.createElement(material.Collapse, {
+    "in": row.getIsExpanded()
+  }, renderDetailPanel == null ? void 0 : renderDetailPanel({
+    row: row,
+    tableInstance: tableInstance
+  }))));
+};
 
-  return {
-    start: start,
-    end: end
-  };
-}
+var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      _tableInstance$option = tableInstance.options,
+      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
+      onMrtRowClick = _tableInstance$option.onMrtRowClick,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
+    row: row,
+    tableInstance: tableInstance
+  }) : muiTableBodyRowProps;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
+    hover: true,
+    onClick: function onClick(event) {
+      return onMrtRowClick == null ? void 0 : onMrtRowClick({
+        event: event,
+        row: row,
+        tableInstance: tableInstance
+      });
+    },
+    selected: row.getIsSelected()
+  }, tableRowProps, {
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: material.lighten(theme.palette.background["default"], 0.06),
+        transition: 'all 0.2s ease-in-out',
+        '&:hover td': {
+          backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
+        }
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), row.getVisibleCells().map(function (cell) {
+    return React__default.createElement(MRT_TableBodyCell, {
+      cell: cell,
+      key: cell.id,
+      enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
+      tableInstance: tableInstance
+    });
+  })), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
+    row: row,
+    tableInstance: tableInstance
+  }));
+};
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
   var tableInstance = _ref.tableInstance,
@@ -7213,14 +7218,14 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
     tableInstance: tableInstance
   }) : muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
-  var rowVirtualizer = useVirtual({
+  var rowVirtualizer = enableRowVirtualization ? useVirtual({
     overscan: isDensePadding ? 15 : 5,
     size: rows.length,
     parentRef: tableContainerRef
-  });
+  }) : {};
   var virtualRows = rowVirtualizer.virtualItems;
-  var paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-  var paddingBottom = virtualRows.length > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
+  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"
@@ -7333,6 +7338,8 @@ var MRT_Table = function MRT_Table(_ref) {
   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,
@@ -7342,7 +7349,11 @@ 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,
@@ -7712,9 +7723,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,