material-react-table 0.36.1 → 0.36.2

package/dist/cjs/inputs/MRT_EditCellTextField.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
 import type { MRT_Cell, MRT_TableInstance } from '..';
-interface Props {
-    cell: MRT_Cell;
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    cell: MRT_Cell<TData>;
+    table: MRT_TableInstance<TData>;
+    showLabel?: boolean;
 }
-export declare const MRT_EditCellTextField: FC<Props>;
+export declare const MRT_EditCellTextField: <TData extends Record<string, any> = {}>({ cell, showLabel, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/MaterialReactTable.d.ts

@@ -249,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;

package/dist/esm/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/esm/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/esm/inputs/MRT_EditCellTextField.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
 import type { MRT_Cell, MRT_TableInstance } from '..';
-interface Props {
-    cell: MRT_Cell;
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    cell: MRT_Cell<TData>;
+    table: MRT_TableInstance<TData>;
+    showLabel?: boolean;
 }
-export declare const MRT_EditCellTextField: FC<Props>;
+export declare const MRT_EditCellTextField: <TData extends Record<string, any> = {}>({ cell, showLabel, table, }: Props<TData>) => JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, use
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 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 { 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, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -522,29 +522,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)),
@@ -873,11 +881,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 = () => {
@@ -889,13 +896,15 @@ const MRT_EditActionButtons = ({ row, table }) => {
         });
         setEditingRow(null);
     };
-    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } },
+    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, title: localization.cancel },
             React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
                 React.createElement(CancelIcon, null))),
         React.createElement(Tooltip, { arrow: true, title: localization.save },
             React.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
-                React.createElement(SaveIcon, null)))));
+                React.createElement(SaveIcon, null))))) : (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: handleCancel }, localization.cancel),
+        React.createElement(Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
 };
 
 const commonIconButtonStyles = {
@@ -909,7 +918,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] = useState(null);
     const handleOpenRowActionMenu = (event) => {
@@ -921,7 +930,7 @@ const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    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 },
+    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) && editingMode === 'row' ? (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 },
@@ -1731,10 +1740,10 @@ 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 })))));
 };
 
-const MRT_EditCellTextField = ({ cell, table }) => {
+const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     var _a;
     const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
-    const { column, row } = cell;
+    const { column } = cell;
     const { columnDef } = column;
     const { editingRow } = getState();
     const [value, setValue] = useState(() => cell.getValue());
@@ -1757,17 +1766,14 @@ const MRT_EditCellTextField = ({ cell, table }) => {
         var _a;
         (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         if (editingRow) {
-            if (!row._valuesCache)
-                row._valuesCache = {};
-            row._valuesCache[column.id] = value;
-            setEditingRow(Object.assign({}, editingRow));
+            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: value }) }));
         }
         setEditingCell(null);
     };
     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: "none", onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange })));
+    return (React.createElement(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 }) => {
@@ -1835,6 +1841,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);
@@ -1932,10 +1939,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                     backgroundColor: enableHover &&
                         enableEditing &&
                         columnDef.enableEditing !== false &&
-                        editingMode !== 'row'
+                        ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
                         ? theme.palette.mode === 'dark'
-                            ? `${lighten(theme.palette.background.default, 0.13)} !important`
-                            : `${darken(theme.palette.background.default, 0.07)} !important`
+                            ? `${lighten(theme.palette.background.default, 0.2)} !important`
+                            : `${darken(theme.palette.background.default, 0.1)} !important`
                         : undefined,
                 } }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
@@ -2209,6 +2216,23 @@ const MRT_TablePaper = ({ table }) => {
         enableBottomToolbar && React.createElement(MRT_BottomToolbar, { table: table })));
 };
 
+const MRT_EditRowModal = ({ open, row, table, }) => {
+    const { options: { localization }, } = table;
+    return (React.createElement(Dialog, { open: open },
+        React.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
+        React.createElement(DialogContent, null,
+            React.createElement(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.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table }))))),
+        React.createElement(DialogActions, { sx: { p: '1.25rem' } },
+            React.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] = useState(props.tableId);
@@ -2310,7 +2334,8 @@ const MRT_TableRoot = (props) => {
     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 })),
-        !isFullScreen && React.createElement(MRT_TablePaper, { table: table })));
+        !isFullScreen && React.createElement(MRT_TablePaper, { table: table }),
+        editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };
 
 var MaterialReactTable = (_a) => {