material-react-table 0.35.2 → 0.36.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent } from 'react';
+import { Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options } from 'react-virtual';
@@ -356,15 +356,15 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
      * @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);
@@ -389,18 +389,6 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         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;
 };
 declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -452,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;
@@ -508,9 +496,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         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>;
@@ -591,18 +579,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.35.2",
+  "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

@@ -1,11 +1,4 @@
-import React, {
-  ChangeEvent,
-  Dispatch,
-  DragEvent,
-  FocusEvent,
-  ReactNode,
-  SetStateAction,
-} from 'react';
+import React, { Dispatch, DragEvent, ReactNode, SetStateAction } from 'react';
 import type {
   AlertProps,
   ButtonProps,
@@ -263,8 +256,8 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   muiTableBodyCellCopyButtonProps?:
     | ButtonProps
     | (({
-        table,
         cell,
+        table,
       }: {
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
@@ -272,17 +265,17 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   muiTableBodyCellEditTextFieldProps?:
     | TextFieldProps
     | (({
-        table,
         cell,
+        table,
       }: {
-        table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
+        table: MRT_TableInstance<TData>;
       }) => TextFieldProps);
   muiTableBodyCellProps?:
     | TableCellProps
     | (({
-        table,
         cell,
+        table,
       }: {
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
@@ -334,28 +327,6 @@ export 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;
 };
 
@@ -461,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;
@@ -539,11 +510,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | (({
-          table,
           cell,
+          table,
         }: {
-          table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
+          table: MRT_TableInstance<TData>;
         }) => TextFieldProps);
     muiTableBodyCellProps?:
       | TableCellProps
@@ -693,28 +664,6 @@ export 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,

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);
@@ -238,13 +239,13 @@ export const MRT_TableBodyCell: FC<Props> = ({
             : undefined,
         '&:hover': {
           backgroundColor:
-            enableHover && enableEditing && editingMode !== 'row'
+            enableHover &&
+            enableEditing &&
+            columnDef.enableEditing !== false &&
+            ['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
@@ -274,7 +275,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             rowRef={rowRef}
             table={table}
           />
-        ) : columnDefType === 'display' ? (
+        ) : columnDefType === 'display' &&
+          (column.id === 'mrt-row-select' ||
+            column.id === 'mrt-row-expand' ||
+            !row.getIsGrouped()) ? (
           columnDef.Cell?.({ cell, column, table })
         ) : isEditing ? (
           <MRT_EditCellTextField cell={cell} table={table} />
@@ -283,15 +287,20 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <>
             <MRT_CopyButton cell={cell} table={table}>
               <>
-                {columnDef?.Cell?.({ cell, column, table }) ??
-                  cell.renderValue()}
+                {row.getIsGrouped() && !cell.getIsGrouped()
+                  ? null
+                  : columnDef?.Cell?.({ cell, column, table }) ??
+                    cell.renderValue()}
               </>
             </MRT_CopyButton>
             {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
           </>
         ) : (
           <>
-            {columnDef?.Cell?.({ cell, column, table }) ?? cell.renderValue()}
+            {row.getIsGrouped() && !cell.getIsGrouped()
+              ? null
+              : columnDef?.Cell?.({ cell, column, table }) ??
+                cell.renderValue()}
             {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

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,53 +1,30 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FocusEvent,
-  MouseEvent,
-  useState,
-} from 'react';
-import { TextField } from '@mui/material';
-import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
+import React, { ChangeEvent, FocusEvent, MouseEvent, useState } from 'react';
+import { TextField, TextFieldProps } from '@mui/material';
+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,
-      onCellEditBlur,
-      onCellEditChange,
-    },
+    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<string>());
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-    columnDef.onCellEditChange?.({ event, cell, table, value });
-    onCellEditChange?.({ event, cell, table, value });
-  };
-
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    if (editingRow) {
-      if (!row._valuesCache) row._valuesCache = {};
-      (row._valuesCache as Record<string, any>)[column.id] = value;
-      setEditingRow({ ...editingRow } as MRT_Row);
-    }
-    setEditingCell(null);
-    columnDef.onCellEditBlur?.({ event, cell, table, value });
-    onCellEditBlur?.({ event, cell, table, value });
-  };
-
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
       ? muiTableBodyCellEditTextFieldProps({ cell, table })
@@ -61,26 +38,45 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
         })
       : columnDef.muiTableBodyCellEditTextFieldProps;
 
-  const textFieldProps = {
+  const textFieldProps: TextFieldProps = {
     ...mTableBodyCellEditTextFieldProps,
     ...mcTableBodyCellEditTextFieldProps,
   };
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    textFieldProps.onChange?.(event);
+    setValue(event.target.value);
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    textFieldProps.onBlur?.(event);
+    if (editingRow) {
+      setEditingRow({
+        ...editingRow,
+        _valuesCache: { ...editingRow._valuesCache, [column.id]: value },
+      } as any);
+    }
+    setEditingCell(null);
+  };
+
   if (columnDef.Edit) {
     return <>{columnDef.Edit?.({ cell, column, 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"
-      onBlur={handleBlur}
-      onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}
+      onBlur={handleBlur}
+      onChange={handleChange}
     />
   );
 };

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 />
+      )}
     </>
   );
 };