material-react-table 0.35.2 → 0.36.0

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>;

package/package.json

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

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