material-react-table 0.35.2 → 0.36.2

package/dist/cjs/MaterialReactTable.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, Dispatch, DragEvent, FocusEvent, ReactNode, SetStateAction } from 'react';
+import { Dispatch, DragEvent, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions } from 'react-virtual';
@@ -165,15 +165,15 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @default gets set to the same value as `accessorKey` by default
      */
     id?: LiteralUnion<string & keyof TData>;
-    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ table, cell, }: {
+    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, table, }: {
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
         cell: MRT_Cell<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | (({ table, cell, }: {
+    muiTableBodyCellProps?: TableCellProps | (({ cell, table, }: {
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => TableCellProps);
@@ -198,18 +198,6 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
-    onCellEditBlur?: ({ cell, event, table, value, }: {
-        event: FocusEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
-    onCellEditChange?: ({ cell, event, table, value, }: {
-        event: ChangeEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
     sortingFn?: MRT_SortingFn;
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -261,7 +249,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
-    editingMode?: 'table' | 'row' | 'cell';
+    editingMode?: 'table' | 'modal' | 'row' | 'cell';
     enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -317,9 +305,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
         cell: MRT_Cell<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | (({ table, cell, }: {
         table: MRT_TableInstance<TData>;
@@ -400,18 +388,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
-    onCellEditBlur?: ({ cell, event, table, value, }: {
-        event: FocusEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
-    onCellEditChange?: ({ cell, event, table, value, }: {
-        event: ChangeEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
     onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
         event: DragEvent<HTMLButtonElement>;
         draggedColumn: MRT_Column<TData>;

package/dist/cjs/body/MRT_EditRowModal.d.ts

@@ -0,0 +1,8 @@
+import type { MRT_Row, MRT_TableInstance } from '..';
+interface Props<TData extends Record<string, any> = {}> {
+    open: boolean;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+}
+export declare const MRT_EditRowModal: <TData extends Record<string, any> = {}>({ open, row, table, }: Props<TData>) => JSX.Element;
+export {};

package/dist/cjs/buttons/MRT_EditActionButtons.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
-interface Props {
-    row: MRT_Row;
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+    variant?: 'icon' | 'text';
 }
-export declare const MRT_EditActionButtons: FC<Props>;
+export declare const MRT_EditActionButtons: <TData extends Record<string, any> = {}>({ row, table, variant, }: Props<TData>) => JSX.Element;
 export {};

package/dist/cjs/index.js

@@ -530,29 +530,37 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
     return [...columnOrder];
 };
-const getLeadingDisplayColumnIds = (props) => [
-    (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
-    ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
-        (props.enableEditing && props.editingMode === 'row')) &&
-        'mrt-row-actions',
-    props.positionExpandColumn === 'first' &&
-        (props.enableExpanding ||
-            props.enableGrouping ||
-            props.renderDetailPanel) &&
-        'mrt-row-expand',
-    props.enableRowSelection && 'mrt-row-select',
-    props.enableRowNumbers && 'mrt-row-numbers',
-].filter(Boolean);
-const getTrailingDisplayColumnIds = (props) => [
-    ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
-        (props.enableEditing && props.editingMode === 'row')) &&
-        'mrt-row-actions',
-    props.positionExpandColumn === 'last' &&
-        (props.enableExpanding ||
-            props.enableGrouping ||
-            props.renderDetailPanel) &&
-        'mrt-row-expand',
-];
+const getLeadingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
+        ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
+            (props.enableEditing &&
+                ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'first' &&
+            (props.enableExpanding ||
+                props.enableGrouping ||
+                props.renderDetailPanel) &&
+            'mrt-row-expand',
+        props.enableRowSelection && 'mrt-row-select',
+        props.enableRowNumbers && 'mrt-row-numbers',
+    ].filter(Boolean);
+};
+const getTrailingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
+            (props.enableEditing &&
+                ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'last' &&
+            (props.enableExpanding ||
+                props.enableGrouping ||
+                props.renderDetailPanel) &&
+            'mrt-row-expand',
+    ];
+};
 const getDefaultColumnOrderIds = (props) => [
     ...getLeadingDisplayColumnIds(props),
     ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
@@ -881,11 +889,10 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
         })));
 };
 
-const MRT_EditActionButtons = ({ row, table }) => {
+const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
     const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const handleCancel = () => {
-        row._valuesCache = Object.assign({}, row.original);
         setEditingRow(null);
     };
     const handleSave = () => {
@@ -897,13 +904,15 @@ const MRT_EditActionButtons = ({ row, table }) => {
         });
         setEditingRow(null);
     };
-    return (React__default["default"].createElement(material.Box, { sx: { display: 'flex', gap: '0.75rem' } },
+    return (React__default["default"].createElement(material.Box, { sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.cancel },
             React__default["default"].createElement(material.IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
                 React__default["default"].createElement(CancelIcon, null))),
         React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.save },
             React__default["default"].createElement(material.IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
-                React__default["default"].createElement(SaveIcon, null)))));
+                React__default["default"].createElement(SaveIcon, null))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.Button, { onClick: handleCancel }, localization.cancel),
+        React__default["default"].createElement(material.Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
 };
 
 const commonIconButtonStyles = {
@@ -917,7 +926,7 @@ const commonIconButtonStyles = {
     },
 };
 const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
-    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
+    const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = React.useState(null);
     const handleOpenRowActionMenu = (event) => {
@@ -929,7 +938,7 @@ const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(material.Tooltip, { placement: "right", arrow: true, title: localization.edit },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(material.Tooltip, { placement: "right", arrow: true, title: localization.edit },
         React__default["default"].createElement(material.IconButton, { sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React__default["default"].createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
@@ -1739,31 +1748,13 @@ const MRT_TableHead = ({ table }) => {
     return (React__default["default"].createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
-const MRT_EditCellTextField = ({ cell, table }) => {
+const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     var _a;
-    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setEditingCell, setEditingRow, } = table;
-    const { column, row } = cell;
+    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
+    const { column } = cell;
     const { columnDef } = column;
     const { editingRow } = getState();
     const [value, setValue] = React.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, value });
-        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table, value });
-    };
-    const handleBlur = (event) => {
-        var _a;
-        if (editingRow) {
-            if (!row._valuesCache)
-                row._valuesCache = {};
-            row._valuesCache[column.id] = value;
-            setEditingRow(Object.assign({}, editingRow));
-        }
-        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 })
         : muiTableBodyCellEditTextFieldProps;
@@ -1774,10 +1765,23 @@ const MRT_EditCellTextField = ({ cell, table }) => {
         })
         : columnDef.muiTableBodyCellEditTextFieldProps;
     const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
+    const handleChange = (event) => {
+        var _a;
+        (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
+        setValue(event.target.value);
+    };
+    const handleBlur = (event) => {
+        var _a;
+        (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
+        if (editingRow) {
+            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: value }) }));
+        }
+        setEditingCell(null);
+    };
     if (columnDef.Edit) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
     }
-    return (React__default["default"].createElement(material.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)));
+    return (React__default["default"].createElement(material.TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, label: showLabel ? column.columnDef.header : undefined, margin: "none", onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange })));
 };
 
 const MRT_CopyButton = ({ cell, children, table }) => {
@@ -1845,6 +1849,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
+        editingMode !== 'modal' &&
         (editingMode === 'table' ||
             (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
@@ -1939,10 +1944,13 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                     : column.getIsPinned()
                         ? 1
                         : undefined, '&:hover': {
-                    backgroundColor: enableHover && enableEditing && editingMode !== 'row'
+                    backgroundColor: enableHover &&
+                        enableEditing &&
+                        columnDef.enableEditing !== false &&
+                        ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
                         ? theme.palette.mode === 'dark'
-                            ? `${material.lighten(theme.palette.background.default, 0.13)} !important`
-                            : `${material.darken(theme.palette.background.default, 0.07)} !important`
+                            ? `${material.lighten(theme.palette.background.default, 0.2)} !important`
+                            : `${material.darken(theme.palette.background.default, 0.1)} !important`
                         : undefined,
                 } }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
@@ -1950,14 +1958,22 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         } }),
         React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React__default["default"].createElement(material.Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, muiTableBodyCellSkeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
-            column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table })) : isEditing ? (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+            column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
+            (column.id === 'mrt-row-select' ||
+                column.id === 'mrt-row-expand' ||
+                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table })) : isEditing ? (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
             columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
-                React__default["default"].createElement(React__default["default"].Fragment, null, (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
+                React__default["default"].createElement(React__default["default"].Fragment, null, row.getIsGrouped() && !cell.getIsGrouped()
+                    ? null
+                    : (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
             cell.getIsGrouped() && React__default["default"].createElement(React__default["default"].Fragment, null,
                 " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
                 _d.length,
-                ")"))) : (React__default["default"].createElement(React__default["default"].Fragment, null, (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
+                ")"))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            row.getIsGrouped() && !cell.getIsGrouped()
+                ? null
+                : (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
             cell.getIsGrouped() && React__default["default"].createElement(React__default["default"].Fragment, null,
                 " (", (_j = (_h = row.subRows) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : '',
                 ")"))))));
@@ -2208,6 +2224,23 @@ const MRT_TablePaper = ({ table }) => {
         enableBottomToolbar && React__default["default"].createElement(MRT_BottomToolbar, { table: table })));
 };
 
+const MRT_EditRowModal = ({ open, row, table, }) => {
+    const { options: { localization }, } = table;
+    return (React__default["default"].createElement(material.Dialog, { open: open },
+        React__default["default"].createElement(material.DialogTitle, { textAlign: "center" }, localization.edit),
+        React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.Stack, { sx: {
+                    width: '100%',
+                    minWidth: { xs: '300px', sm: '360px', md: '400px' },
+                    gap: '1.5rem',
+                } }, row
+                .getVisibleCells()
+                .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+                .map((cell) => (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table }))))),
+        React__default["default"].createElement(material.DialogActions, { sx: { p: '1.25rem' } },
+            React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
+};
+
 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, _5, _6, _7;
     const [tableId, setIdPrefix] = React.useState(props.tableId);
@@ -2309,7 +2342,8 @@ const MRT_TableRoot = (props) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),
-        !isFullScreen && React__default["default"].createElement(MRT_TablePaper, { table: table })));
+        !isFullScreen && React__default["default"].createElement(MRT_TablePaper, { table: table }),
+        editingRow && props.editingMode === 'modal' && (React__default["default"].createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };
 
 var MaterialReactTable = (_a) => {