material-react-table 0.34.1 → 0.35.2

package/dist/esm/material-react-table.esm.js

@@ -3,6 +3,7 @@ import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel,
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -559,7 +560,7 @@ const getDefaultColumnFilterFn = (columnDef) => {
     return 'fuzzy';
 };
 
-const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCurrentHoveredColumn, column, isSubMenu, table, }) => {
+const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
     var _a;
     const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
@@ -587,14 +588,14 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
     };
     const handleDragEnd = (_e) => {
         setIsDragging(false);
-        setCurrentHoveredColumn(null);
-        if (currentHoveredColumn) {
-            setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+        setHoveredColumn(null);
+        if (hoveredColumn) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
         }
     };
     const handleDragEnter = (_e) => {
         if (!isDragging) {
-            setCurrentHoveredColumn(column);
+            setHoveredColumn(column);
         }
     };
     return (React.createElement(React.Fragment, null,
@@ -605,7 +606,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
                 opacity: isDragging ? 0.5 : 1,
                 outline: isDragging
                     ? `1px dashed ${theme.palette.divider}`
-                    : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                         ? `2px dashed ${theme.palette.primary.main}`
                         : 'none',
                 pl: `${(column.depth + 0.5) * 2}rem`,
@@ -635,7 +636,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
                         React.createElement(Switch, null)), disabled: (isSubMenu && switchChecked) ||
                         !column.getCanHide() ||
                         column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, currentHoveredColumn: currentHoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setCurrentHoveredColumn: setCurrentHoveredColumn, table: table })))));
+        _a.map((c, i) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
@@ -665,7 +666,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
         getLeftLeafColumns(),
         getRightLeafColumns(),
     ]);
-    const [currentHoveredColumn, setCurrentHoveredColumn] = useState(null);
+    const [hoveredColumn, setHoveredColumn] = useState(null);
     return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
@@ -680,7 +681,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
             !isSubMenu && enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
             React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
         React.createElement(Divider, null),
-        allColumns.map((column, index) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, currentHoveredColumn: currentHoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setCurrentHoveredColumn: setCurrentHoveredColumn, table: table })))));
+        allColumns.map((column, index) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
 const commonMenuItemStyles = {
@@ -873,16 +874,20 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
 };
 
 const MRT_EditActionButtons = ({ row, table }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditRowSubmit, }, setCurrentEditingRow, } = table;
-    const { currentEditingRow } = getState();
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, setEditingRow, } = table;
+    const { editingRow } = getState();
     const handleCancel = () => {
-        var _a;
-        row._valuesCache = (_a = row.original) !== null && _a !== void 0 ? _a : {};
-        setCurrentEditingRow(null);
+        row._valuesCache = Object.assign({}, row.original);
+        setEditingRow(null);
     };
     const handleSave = () => {
-        onEditRowSubmit === null || onEditRowSubmit === void 0 ? void 0 : onEditRowSubmit({ row: currentEditingRow !== null && currentEditingRow !== void 0 ? currentEditingRow : row, table });
-        setCurrentEditingRow(null);
+        var _a;
+        onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
+            row: editingRow !== null && editingRow !== void 0 ? editingRow : row,
+            table,
+            values: (_a = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _a !== void 0 ? _a : Object.assign({}, row.original),
+        });
+        setEditingRow(null);
     };
     return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } },
         React.createElement(Tooltip, { arrow: true, title: localization.cancel },
@@ -904,8 +909,8 @@ const commonIconButtonStyles = {
     },
 };
 const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
-    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setCurrentEditingRow, } = table;
-    const { currentEditingRow } = getState();
+    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
+    const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
     const handleOpenRowActionMenu = (event) => {
         event.stopPropagation();
@@ -913,10 +918,10 @@ const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
         setAnchorEl(event.currentTarget);
     };
     const handleStartEditMode = () => {
-        setCurrentEditingRow(Object.assign({}, row));
+        setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ row, table }))) : row.id === (currentEditingRow === null || currentEditingRow === void 0 ? void 0 : currentEditingRow.id) ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
+    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
         React.createElement(IconButton, { sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
@@ -1146,15 +1151,15 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
 
 const MRT_ToolbarDropZone = ({ table }) => {
     var _a, _b;
-    const { getState, options: { enableGrouping, localization }, setCurrentHoveredColumn, } = table;
-    const { currentDraggingColumn, currentHoveredColumn } = getState();
+    const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
+    const { draggingColumn, hoveredColumn } = getState();
     const handleDragEnter = (_event) => {
-        setCurrentHoveredColumn({ id: 'drop-zone' });
+        setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!currentDraggingColumn },
+    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!draggingColumn },
         React.createElement(Box, { sx: (theme) => ({
                 alignItems: 'center',
-                backgroundColor: alpha(theme.palette.info.main, (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
+                backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 border: `dashed ${theme.palette.info.main} 2px`,
                 display: 'flex',
                 justifyContent: 'center',
@@ -1163,7 +1168,7 @@ const MRT_ToolbarDropZone = ({ table }) => {
                 width: 'calc(100% - 4px)',
                 zIndex: 2,
             }), onDragEnter: handleDragEnter },
-            React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+            React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
@@ -1493,9 +1498,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setCurrentDraggingColumn, setCurrentHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
-    const { currentHoveredColumn, currentDraggingColumn, columnOrder } = getState();
+    const { hoveredColumn, draggingColumn, columnOrder } = getState();
     const mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function
         ? muiTableHeadCellDragHandleProps({ column, table })
         : muiTableHeadCellDragHandleProps;
@@ -1504,25 +1509,25 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         : columnDef.muiTableHeadCellDragHandleProps;
     const iconButtonProps = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
     const handleDragStart = (e) => {
-        setCurrentDraggingColumn(column);
+        setDraggingColumn(column);
         e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
     };
     const handleDragEnd = (event) => {
         onColumnDrop === null || onColumnDrop === void 0 ? void 0 : onColumnDrop({
             event,
             draggedColumn: column,
-            targetColumn: currentHoveredColumn,
+            targetColumn: hoveredColumn,
         });
-        if ((currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+        if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             column.toggleGrouping();
         }
         else if (enableColumnOrdering &&
-            currentHoveredColumn &&
-            (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id)) {
-            setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+            hoveredColumn &&
+            (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
         }
-        setCurrentDraggingColumn(null);
-        setCurrentHoveredColumn(null);
+        setDraggingColumn(null);
+        setHoveredColumn(null);
     };
     return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
@@ -1580,8 +1585,8 @@ const MRT_TableHeadCellSortLabel = ({ header, table }) => {
 const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
-    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setCurrentHoveredColumn, } = table;
-    const { density, currentDraggingColumn, currentHoveredColumn, showColumnFilters, } = getState();
+    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
+    const { density, draggingColumn, hoveredColumn, showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1603,16 +1608,16 @@ const MRT_TableHeadCell = ({ header, table }) => {
         return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
     };
     const handleDragEnter = (_e) => {
-        if (enableGrouping && (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
-            setCurrentHoveredColumn(null);
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
         }
-        if (enableColumnOrdering && currentDraggingColumn) {
-            setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        if (enableColumnOrdering && draggingColumn) {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
-        : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : undefined;
     const draggingBorders = draggingBorder
@@ -1640,8 +1645,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
                         : undefined, fontWeight: 'bold', left: column.getIsPinned() === 'left'
                     ? `${column.getStart('left')}px`
-                    : undefined, overflow: 'visible', opacity: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id ||
-                    (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    : undefined, overflow: 'visible', opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                     ? 0.5
                     : 1, p: density === 'compact'
                     ? '0.5rem'
@@ -1663,7 +1667,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? '0.25'
                         : density === 'comfortable'
                             ? '.75rem'
-                            : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+                            : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
                     ? 3
                     : column.getIsPinned() && columnDefType !== 'group'
                         ? 2
@@ -1727,521 +1731,30 @@ const MRT_TableHead = ({ table }) => {
     return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
-function _extends() {
-  _extends = 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.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(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.useLayoutEffect : React.useEffect;
-
-function useRect(nodeRef, initialRect) {
-  if (initialRect === void 0) {
-    initialRect = {
-      width: 0,
-      height: 0
-    };
-  }
-
-  var _React$useState = React.useState(nodeRef.current),
-      element = _React$useState[0],
-      setElement = _React$useState[1];
-
-  var _React$useReducer = React.useReducer(rectReducer, initialRect),
-      rect = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
-
-  var initialRectSet = React.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.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.useRef({
-    scrollOffset: 0,
-    measurements: []
-  });
-
-  var _React$useState = React.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.useCallback(function (offset) {
-    if (parentRef.current) {
-      parentRef.current[scrollKey] = offset;
-    }
-  }, [parentRef, scrollKey]);
-  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
-  scrollToFn = React.useCallback(function (offset) {
-    resolvedScrollToFn(offset, defaultScrollToFn);
-  }, [defaultScrollToFn, resolvedScrollToFn]);
-
-  var _React$useState2 = React.useState({}),
-      measuredCache = _React$useState2[0],
-      setMeasuredCache = _React$useState2[1];
-
-  var measure = React.useCallback(function () {
-    return setMeasuredCache({});
-  }, []);
-  var pendingMeasuredCacheIndexesRef = React.useRef([]);
-  var measurements = React.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.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.useMemo(function () {
-    return rangeExtractor({
-      start: start,
-      end: end,
-      overscan: overscan,
-      size: measurements.length
-    });
-  }, [start, end, overscan, measurements.length, rangeExtractor]);
-  var measureSizeRef = React.useRef(measureSize);
-  measureSizeRef.current = measureSize;
-  var virtualItems = React.useMemo(function () {
-    var virtualItems = [];
-
-    var _loop = function _loop(k, len) {
-      var i = indexes[k];
-      var measurement = measurements[i];
-
-      var item = _extends(_extends({}, 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(_extends({}, 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.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (mountedRef.current) {
-      setMeasuredCache({});
-    }
-
-    mountedRef.current = true;
-  }, [estimateSize]);
-  var scrollToOffset = React.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.useCallback(function (index, _temp2) {
-    var _ref3 = _temp2 === void 0 ? {} : _temp2,
-        _ref3$align = _ref3.align,
-        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
-        rest = _objectWithoutPropertiesLoose(_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({
-      align: align
-    }, rest));
-  }, [scrollToOffset, size]);
-  var scrollToIndex = React.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
-  };
-}
-
 const MRT_EditCellTextField = ({ cell, table }) => {
     var _a;
-    const { getState, options: { tableId, enableEditing, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setCurrentEditingCell, setCurrentEditingRow, } = table;
+    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const [value, setValue] = useState(cell.getValue());
+    const { editingRow } = getState();
+    const [value, setValue] = useState(() => cell.getValue());
     const handleChange = (event) => {
         var _a;
         setValue(event.target.value);
-        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table });
-        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table });
+        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
+        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table, value });
     };
     const handleBlur = (event) => {
         var _a;
-        if (getState().currentEditingRow) {
+        if (editingRow) {
             if (!row._valuesCache)
                 row._valuesCache = {};
             row._valuesCache[column.id] = value;
-            setCurrentEditingRow(Object.assign({}, getState().currentEditingRow));
+            setEditingRow(Object.assign({}, editingRow));
         }
-        setCurrentEditingCell(null);
-        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table });
-        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table });
+        setEditingCell(null);
+        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
+        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table, value });
     };
     const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
         ? muiTableBodyCellEditTextFieldProps({ cell, table })
@@ -2253,10 +1766,10 @@ const MRT_EditCellTextField = ({ cell, table }) => {
         })
         : columnDef.muiTableBodyCellEditTextFieldProps;
     const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
-    if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+    if (columnDef.Edit) {
         return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
     }
-    return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "dense", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
+    return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
 };
 
 const MRT_CopyButton = ({ cell, children, table }) => {
@@ -2292,16 +1805,16 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
         : muiTableBodyRowDragHandleProps;
     const handleDragStart = (e) => {
         e.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setCurrentDraggingRow(cell.row);
+        table.setDraggingRow(cell.row);
     };
     const handleDragEnd = (event) => {
         onRowDrop === null || onRowDrop === void 0 ? void 0 : onRowDrop({
             event,
-            draggedRow: table.getState().currentDraggingRow,
-            targetRow: table.getState().currentHoveredRow,
+            draggedRow: table.getState().draggingRow,
+            targetRow: table.getState().hoveredRow,
         });
-        table.setCurrentDraggingRow(null);
-        table.setCurrentHoveredRow(null);
+        table.setDraggingRow(null);
+        table.setHoveredRow(null);
     };
     return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
@@ -2309,8 +1822,8 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j;
     const theme = useTheme();
-    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, tableId, }, setCurrentEditingCell, setCurrentHoveredColumn, } = table;
-    const { currentDraggingColumn, currentEditingCell, currentEditingRow, currentHoveredColumn, density, isLoading, showSkeletons, } = getState();
+    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, tableId, }, setEditingCell, setHoveredColumn, } = table;
+    const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2325,8 +1838,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
         (editingMode === 'table' ||
-            (currentEditingRow === null || currentEditingRow === void 0 ? void 0 : currentEditingRow.id) === row.id ||
-            (currentEditingCell === null || currentEditingCell === void 0 ? void 0 : currentEditingCell.id) === cell.id);
+            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
+            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
     const [skeletonWidth, setSkeletonWidth] = useState(0);
     useEffect(() => setSkeletonWidth(isLoading || showSkeletons
         ? columnDefType === 'display'
@@ -2338,7 +1851,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         if ((enableEditing || columnDef.enableEditing) &&
             columnDef.enableEditing !== false &&
             editingMode === 'cell') {
-            setCurrentEditingCell(cell);
+            setEditingCell(cell);
             setTimeout(() => {
                 const textField = document.getElementById(`mrt-${tableId}-edit-cell-text-field-${cell.id}`);
                 if (textField) {
@@ -2359,16 +1872,16 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
     };
     const handleDragEnter = (_e) => {
-        if (enableGrouping && (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
-            setCurrentHoveredColumn(null);
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
         }
-        if (enableColumnOrdering && currentDraggingColumn) {
-            setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        if (enableColumnOrdering && draggingColumn) {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
-        : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : undefined;
     const draggingBorders = draggingBorder
@@ -2394,8 +1907,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                         ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
                         : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text', left: column.getIsPinned() === 'left'
                     ? `${column.getStart('left')}px`
-                    : undefined, opacity: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id ||
-                    (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    : undefined, opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                     ? 0.5
                     : 1, overflow: 'hidden', p: density === 'compact'
                     ? columnDefType === 'display'
@@ -2414,7 +1926,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                             : density === 'comfortable'
                                 ? 0.75
                                 : 1.25)}rem`
-                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
                     ? 2
                     : column.getIsPinned()
                         ? 1
@@ -2460,20 +1972,20 @@ const MRT_TableDetailPanel = ({ row, table }) => {
 const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
     var _a, _b;
     const theme = useTheme();
-    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setCurrentHoveredRow, } = table;
-    const { currentDraggingRow, currentHoveredRow } = getState();
+    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setHoveredRow, } = table;
+    const { draggingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
         : muiTableBodyRowProps;
     const handleDragEnter = (_e) => {
-        if (enableRowOrdering && currentDraggingRow) {
-            setCurrentHoveredRow(row);
+        if (enableRowOrdering && draggingRow) {
+            setHoveredRow(row);
         }
     };
     const rowRef = useRef(null);
-    const draggingBorder = (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id
+    const draggingBorder = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
         ? `1px dashed ${theme.palette.text.secondary}`
-        : (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
+        : (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
             ? `2px dashed ${theme.palette.primary.main}`
             : undefined;
     const draggingBorders = draggingBorder
@@ -2482,10 +1994,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
         }
         : undefined;
     return (React.createElement(React.Fragment, null,
-        React.createElement(TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: rowRef }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), opacity: (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id ||
-                    (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
-                    ? 0.5
-                    : 1, transition: 'all 0.2s ease-in-out', '&:hover td': {
+        React.createElement(TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: rowRef }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), 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 0.2s ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${lighten(theme.palette.background.default, 0.12)}`
@@ -2692,7 +2201,7 @@ const MRT_TablePaper = ({ table }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     const [tableId, setIdPrefix] = useState(props.tableId);
     useEffect(() => { var _a; return setIdPrefix((_a = props.tableId) !== null && _a !== void 0 ? _a : Math.random().toString(36).substring(2, 9)); }, [props.tableId]);
     const initialState = useMemo(() => {
@@ -2700,20 +2209,12 @@ const MRT_TableRoot = (props) => {
         const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
         initState.columnOrder =
             (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(props);
+        initState.globalFilterFn =
+            props.globalFilterFn instanceof String
+                ? props.globalFilterFn
+                : 'fuzzy';
         return initState;
     }, []);
-    const [columnOrder, setColumnOrder] = useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
-    const [currentDraggingColumn, setCurrentDraggingColumn] = useState((_b = initialState.currentDraggingColumn) !== null && _b !== void 0 ? _b : null);
-    const [currentDraggingRow, setCurrentDraggingRow] = useState((_c = initialState.currentDraggingRow) !== null && _c !== void 0 ? _c : null);
-    const [currentEditingCell, setCurrentEditingCell] = useState((_d = initialState.currentEditingCell) !== null && _d !== void 0 ? _d : null);
-    const [currentEditingRow, setCurrentEditingRow] = useState((_e = initialState.currentEditingRow) !== null && _e !== void 0 ? _e : null);
-    const [currentHoveredColumn, setCurrentHoveredColumn] = useState((_f = initialState.currentHoveredColumn) !== null && _f !== void 0 ? _f : null);
-    const [currentHoveredRow, setCurrentHoveredRow] = useState((_g = initialState.currentHoveredRow) !== null && _g !== void 0 ? _g : null);
-    const [density, setDensity] = useState((_h = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _h !== void 0 ? _h : 'comfortable');
-    const [isFullScreen, setIsFullScreen] = useState((_j = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _j !== void 0 ? _j : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_l = (_k = props.initialState) === null || _k === void 0 ? void 0 : _k.showAlertBanner) !== null && _l !== void 0 ? _l : false);
-    const [showColumnFilters, setShowFilters] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _m !== void 0 ? _m : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _o !== void 0 ? _o : false);
     const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         return ({
@@ -2722,9 +2223,19 @@ const MRT_TableRoot = (props) => {
                 : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
         });
     })));
-    const [globalFilterFn, setGlobalFilterFn] = useState(props.globalFilterFn instanceof String
-        ? props.globalFilterFn
-        : 'fuzzy');
+    const [columnOrder, setColumnOrder] = useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
+    const [density, setDensity] = useState((_b = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _b !== void 0 ? _b : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_c = initialState.draggingColumn) !== null && _c !== void 0 ? _c : null);
+    const [draggingRow, setDraggingRow] = useState((_d = initialState.draggingRow) !== null && _d !== void 0 ? _d : null);
+    const [editingCell, setEditingCell] = useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
+    const [editingRow, setEditingRow] = useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
+    const [hoveredColumn, setHoveredColumn] = useState((_h = initialState.hoveredColumn) !== null && _h !== void 0 ? _h : null);
+    const [hoveredRow, setHoveredRow] = useState((_j = initialState.hoveredRow) !== null && _j !== void 0 ? _j : null);
+    const [isFullScreen, setIsFullScreen] = useState((_k = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _k !== void 0 ? _k : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_m = (_l = props.initialState) === null || _l === void 0 ? void 0 : _l.showAlertBanner) !== null && _m !== void 0 ? _m : false);
+    const [showColumnFilters, setShowFilters] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _o !== void 0 ? _o : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _p !== void 0 ? _p : false);
     const displayColumns = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
@@ -2751,8 +2262,6 @@ const MRT_TableRoot = (props) => {
         props.enableRowSelection,
         props.enableSelectAll,
         props.localization,
-        props.muiTableBodyCellProps,
-        props.muiTableHeadCellProps,
         props.positionActionsColumn,
     ]);
     const columnDefs = useMemo(() => prepareColumns([...displayColumns, ...props.columns], columnFilterFns, props.filterFns, props.sortingFns), [columnFilterFns, displayColumns, props.columns]);
@@ -2771,26 +2280,24 @@ const MRT_TableRoot = (props) => {
                 });
             })))
             : props.data;
-    }, [props.data, (_p = props.state) === null || _p === void 0 ? void 0 : _p.isLoading, (_q = props.state) === null || _q === void 0 ? void 0 : _q.showSkeletons]);
+    }, [props.data, (_q = props.state) === null || _q === void 0 ? void 0 : _q.isLoading, (_r = props.state) === null || _r === void 0 ? void 0 : _r.showSkeletons]);
     //@ts-ignore
     const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: 
-        //@ts-ignore
-        (_r = props.filterFns[globalFilterFn]) !== null && _r !== void 0 ? _r : props.filterFns.fuzzy, initialState, state: Object.assign({ columnOrder,
-            currentDraggingColumn,
-            currentDraggingRow,
-            currentEditingCell,
-            currentEditingRow,
-            columnFilterFns,
-            globalFilterFn,
-            currentHoveredColumn,
-            currentHoveredRow,
+        columns: columnDefs, data, globalFilterFn: (_t = (_s = props.filterFns) === null || _s === void 0 ? void 0 : _s[globalFilterFn]) !== null && _t !== void 0 ? _t : (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+            columnOrder,
             density,
+            draggingColumn,
+            draggingRow,
+            editingCell,
+            editingRow,
+            globalFilterFn,
+            hoveredColumn,
+            hoveredRow,
             isFullScreen,
             showAlertBanner,
             showColumnFilters,
-            showGlobalFilter }, props.state), tableId }))), { setCurrentDraggingColumn: (_s = props.onCurrentDraggingColumnChange) !== null && _s !== void 0 ? _s : setCurrentDraggingColumn, setCurrentDraggingRow: (_t = props.onCurrentDraggingRowChange) !== null && _t !== void 0 ? _t : setCurrentDraggingRow, setCurrentEditingCell: (_u = props.onCurrentEditingCellChange) !== null && _u !== void 0 ? _u : setCurrentEditingCell, setCurrentEditingRow: (_v = props.onCurrentEditingRowChange) !== null && _v !== void 0 ? _v : setCurrentEditingRow, setColumnFilterFns: (_w = props.onCurrentFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setGlobalFilterFn: (_x = props.onCurrentGlobalFilterFnChange) !== null && _x !== void 0 ? _x : setGlobalFilterFn, setCurrentHoveredColumn: (_y = props.onCurrentHoveredColumnChange) !== null && _y !== void 0 ? _y : setCurrentHoveredColumn, setCurrentHoveredRow: (_z = props.onCurrentHoveredRowChange) !== null && _z !== void 0 ? _z : setCurrentHoveredRow, setDensity: (_0 = props.onDensityChange) !== null && _0 !== void 0 ? _0 : setDensity, setIsFullScreen: (_1 = props.onIsFullScreenChange) !== null && _1 !== void 0 ? _1 : setIsFullScreen, setShowAlertBanner: (_2 = props.onShowAlertBannerChange) !== null && _2 !== void 0 ? _2 : setShowAlertBanner, setShowFilters: (_3 = props.onShowFiltersChange) !== null && _3 !== void 0 ? _3 : setShowFilters, setShowGlobalFilter: (_4 = props.onShowGlobalFilterChange) !== null && _4 !== void 0 ? _4 : setShowGlobalFilter });
+            showGlobalFilter }, props.state), tableId }))), { setColumnFilterFns: (_v = props.onFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns, setDensity: (_w = props.onDensityChange) !== null && _w !== void 0 ? _w : setDensity, setDraggingColumn: (_x = props.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn, setDraggingRow: (_y = props.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow, setEditingCell: (_z = props.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell, setEditingRow: (_0 = props.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow, setGlobalFilterFn: (_1 = props.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn, setHoveredColumn: (_2 = props.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn, setHoveredRow: (_3 = props.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow, setIsFullScreen: (_4 = props.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen, setShowAlertBanner: (_5 = props.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner, setShowFilters: (_6 = props.onShowFiltersChange) !== null && _6 !== void 0 ? _6 : setShowFilters, setShowGlobalFilter: (_7 = props.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter });
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),