material-react-table 0.34.1 → 0.35.0

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

@@ -559,7 +559,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 +587,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 +605,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 +635,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 +665,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 +680,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 +873,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, onEditRowSubmit, }, 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;
+        onEditRowSubmit === null || onEditRowSubmit === void 0 ? void 0 : onEditRowSubmit({
+            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 +908,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 +917,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 +1150,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 +1167,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 +1497,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 +1508,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 +1584,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 +1607,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 +1644,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 +1666,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
@@ -2221,27 +2224,28 @@ function calculateRange(_ref4) {
 
 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 +2257,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 +2296,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 +2313,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 +2329,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 +2342,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 +2363,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 +2398,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 +2417,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 +2463,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 +2485,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 +2692,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, _8;
     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,31 +2700,34 @@ 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.columnFilterFns = Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            return ({
+                [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
+                    ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
+                    : (_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),
+            });
+        }));
+        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 ({
-            [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
-                ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
-                : (_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 [columnFilterFns, setColumnFilterFns] = useState((_a = initialState.columnFilterFns) !== null && _a !== void 0 ? _a : {});
+    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
+    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
+    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
+    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
+    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
+    const [hoveredColumn, setHoveredColumn] = useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
+    const [hoveredRow, setHoveredRow] = useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
+    const [isFullScreen, setIsFullScreen] = useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
+    const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const displayColumns = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
@@ -2751,8 +2754,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 +2772,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, (_r = props.state) === null || _r === void 0 ? void 0 : _r.isLoading, (_s = props.state) === null || _s === void 0 ? void 0 : _s.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: (_u = (_t = props.filterFns) === null || _t === void 0 ? void 0 : _t[globalFilterFn]) !== null && _u !== void 0 ? _u : (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v.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: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : 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 })),