material-react-table 0.36.1 → 0.36.2

package/dist/index.d.ts

@@ -440,7 +440,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.36.1",
+  "version": "0.36.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -432,7 +432,7 @@ export 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/src/body/MRT_EditRowModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+} from '@mui/material';
+import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import type { MRT_Row, MRT_TableInstance } from '..';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+
+interface Props<TData extends Record<string, any> = {}> {
+  open: boolean;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_EditRowModal = <TData extends Record<string, any> = {}>({
+  open,
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    options: { localization },
+  } = table;
+
+  return (
+    <Dialog open={open}>
+      <DialogTitle textAlign="center">{localization.edit}</DialogTitle>
+      <DialogContent>
+        <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) => (
+              <MRT_EditCellTextField
+                cell={cell}
+                key={cell.id}
+                showLabel
+                table={table}
+              />
+            ))}
+        </Stack>
+      </DialogContent>
+      <DialogActions sx={{ p: '1.25rem' }}>
+        <MRT_EditActionButtons row={row} table={table} variant="text" />
+      </DialogActions>
+    </Dialog>
+  );
+};

package/src/body/MRT_TableBodyCell.tsx

@@ -87,6 +87,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const isEditing =
     isEditable &&
+    editingMode !== 'modal' &&
     (editingMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id);
@@ -241,13 +242,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             enableHover &&
             enableEditing &&
             columnDef.enableEditing !== false &&
-            editingMode !== 'row'
+            ['table', 'cell'].includes(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?.sx instanceof Function

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,13 +1,18 @@
-import React, { FC } from 'react';
-import { Box, IconButton, Tooltip } from '@mui/material';
+import React from 'react';
+import { Box, Button, IconButton, Tooltip } from '@mui/material';
 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 const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
+export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
+  row,
+  table,
+  variant = 'icon',
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -20,7 +25,6 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
   const { editingRow } = getState();
 
   const handleCancel = () => {
-    row._valuesCache = { ...row.original };
     setEditingRow(null);
   };
 
@@ -35,20 +39,31 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
 
   return (
     <Box sx={{ display: 'flex', gap: '0.75rem' }}>
-      <Tooltip arrow title={localization.cancel}>
-        <IconButton aria-label={localization.cancel} onClick={handleCancel}>
-          <CancelIcon />
-        </IconButton>
-      </Tooltip>
-      <Tooltip arrow title={localization.save}>
-        <IconButton
-          aria-label={localization.save}
-          color="info"
-          onClick={handleSave}
-        >
-          <SaveIcon />
-        </IconButton>
-      </Tooltip>
+      {variant === 'icon' ? (
+        <>
+          <Tooltip arrow title={localization.cancel}>
+            <IconButton aria-label={localization.cancel} onClick={handleCancel}>
+              <CancelIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip arrow title={localization.save}>
+            <IconButton
+              aria-label={localization.save}
+              color="info"
+              onClick={handleSave}
+            >
+              <SaveIcon />
+            </IconButton>
+          </Tooltip>
+        </>
+      ) : (
+        <>
+          <Button onClick={handleCancel}>{localization.cancel}</Button>
+          <Button onClick={handleSave} variant="contained">
+            {localization.save}
+          </Button>
+        </>
+      )}
     </Box>
   );
 };

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -24,6 +24,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
+      editingMode,
       enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
@@ -52,7 +53,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
     <>
       {renderRowActions ? (
         <>{renderRowActions({ row, table })}</>
-      ) : row.id === editingRow?.id ? (
+      ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>

package/src/column.utils.ts

@@ -116,7 +116,8 @@ export const getLeadingDisplayColumnIds = <
   [
     (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
-      (props.enableEditing && props.editingMode === 'row')) &&
+      (props.enableEditing &&
+        ['row', 'modal'].includes(props.editingMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
       (props.enableExpanding ||
@@ -133,7 +134,8 @@ export const getTrailingDisplayColumnIds = <
   props: MaterialReactTableProps<TData>,
 ) => [
   ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
-    (props.enableEditing && props.editingMode === 'row')) &&
+    (props.enableEditing &&
+      ['row', 'modal'].includes(props.editingMode ?? ''))) &&
     'mrt-row-actions',
   props.positionExpandColumn === 'last' &&
     (props.enableExpanding ||

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,26 +1,25 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FocusEvent,
-  MouseEvent,
-  useState,
-} from 'react';
+import React, { ChangeEvent, FocusEvent, MouseEvent, useState } from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
-import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
+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 const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
+export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
+  cell,
+  showLabel,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { tableId, muiTableBodyCellEditTextFieldProps },
     setEditingCell,
     setEditingRow,
   } = table;
-  const { column, row } = cell;
+  const { column } = cell;
   const { columnDef } = column;
   const { editingRow } = getState();
 
@@ -52,9 +51,10 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     textFieldProps.onBlur?.(event);
     if (editingRow) {
-      if (!row._valuesCache) row._valuesCache = {};
-      (row._valuesCache as Record<string, any>)[column.id] = value;
-      setEditingRow({ ...editingRow } as MRT_Row);
+      setEditingRow({
+        ...editingRow,
+        _valuesCache: { ...editingRow._valuesCache, [column.id]: value },
+      } as any);
     }
     setEditingCell(null);
   };
@@ -65,7 +65,10 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
 
   return (
     <TextField
+      disabled={columnDef.enableEditing === false}
+      fullWidth
       id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
+      label={showLabel ? column.columnDef.header : undefined}
       margin="none"
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}

package/src/table/MRT_TableRoot.tsx

@@ -33,6 +33,7 @@ import type {
   MRT_TableState,
   MaterialReactTableProps,
 } from '..';
+import { MRT_EditRowModal } from '../body/MRT_EditRowModal';
 
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData>,
@@ -300,6 +301,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         <MRT_TablePaper table={table} />
       </Dialog>
       {!isFullScreen && <MRT_TablePaper table={table} />}
+      {editingRow && props.editingMode === 'modal' && (
+        <MRT_EditRowModal row={editingRow as any} table={table} open />
+      )}
     </>
   );
 };