material-react-table 0.35.1 → 0.36.1

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'> & {
@@ -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>;
@@ -613,7 +589,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onEditRowSubmit?: ({ row, table, values, }: {
+    onEditingRowSave?: ({ row, table, values, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.35.1",
+  "version": "0.36.1",
   "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.",
@@ -53,13 +53,13 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@faker-js/faker": "^7.3.0",
+    "@faker-js/faker": "^7.4.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.10.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
-    "@size-limit/preset-small-lib": "^8.0.0",
+    "@size-limit/preset-small-lib": "^8.0.1",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
@@ -78,10 +78,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.77.2",
+    "rollup": "^2.77.3",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^8.0.0",
+    "size-limit": "^8.0.1",
     "storybook-dark-mode": "^1.1.0",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"

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;
 };
 
@@ -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,
@@ -727,7 +676,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onEditRowSubmit?: ({
+    onEditingRowSave?: ({
       row,
       table,
       values,

package/src/body/MRT_TableBodyCell.tsx

@@ -238,7 +238,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             : undefined,
         '&:hover': {
           backgroundColor:
-            enableHover && enableEditing && editingMode !== 'row'
+            enableHover &&
+            enableEditing &&
+            columnDef.enableEditing !== false &&
+            editingMode !== 'row'
               ? theme.palette.mode === 'dark'
                 ? `${lighten(
                     theme.palette.background.default,
@@ -274,7 +277,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 +289,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

@@ -13,7 +13,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
-      onEditRowSubmit,
+      onEditingRowSave,
     },
     setEditingRow,
   } = table;
@@ -25,7 +25,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
   };
 
   const handleSave = () => {
-    onEditRowSubmit?.({
+    onEditingRowSave?.({
       row: editingRow ?? row,
       table,
       values: editingRow?._valuesCache ?? { ...row.original },

package/src/inputs/MRT_EditCellTextField.tsx

@@ -5,7 +5,7 @@ import React, {
   MouseEvent,
   useState,
 } from 'react';
-import { TextField } from '@mui/material';
+import { TextField, TextFieldProps } from '@mui/material';
 import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
@@ -16,12 +16,7 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   const {
     getState,
-    options: {
-      tableId,
-      muiTableBodyCellEditTextFieldProps,
-      onCellEditBlur,
-      onCellEditChange,
-    },
+    options: { tableId, muiTableBodyCellEditTextFieldProps },
     setEditingCell,
     setEditingRow,
   } = table;
@@ -31,23 +26,6 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
 
   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,11 +39,26 @@ 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) {
+      if (!row._valuesCache) row._valuesCache = {};
+      (row._valuesCache as Record<string, any>)[column.id] = value;
+      setEditingRow({ ...editingRow } as MRT_Row);
+    }
+    setEditingCell(null);
+  };
+
   if (columnDef.Edit) {
     return <>{columnDef.Edit?.({ cell, column, table })}</>;
   }
@@ -74,13 +67,13 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
     <TextField
       id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
       margin="none"
-      onBlur={handleBlur}
-      onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}
+      onBlur={handleBlur}
+      onChange={handleChange}
     />
   );
 };