material-react-table 0.7.0-alpha.6 → 0.7.0-alpha.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0-alpha.6",
+  "version": "0.7.0-alpha.9",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -2,6 +2,7 @@ import React, {
   ChangeEvent,
   Dispatch,
   FC,
+  FocusEvent,
   MouseEvent,
   ReactNode,
   SetStateAction,
@@ -246,6 +247,15 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         tableInstance: MRT_TableInstance;
         column: MRT_ColumnInstance<D>;
       }) => TableCellProps);
+  onCellEditBlur?: ({
+    cell,
+    event,
+    tableInstance,
+  }: {
+    event: FocusEvent<HTMLInputElement>;
+    cell: MRT_Cell<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => void;
   onCellEditChange?: ({
     cell,
     event,
@@ -326,7 +336,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enablePagination?: boolean;
     enableRowActions?: boolean;
     enableStickyHeader?: boolean;
-    enableRowEditing?: boolean;
+    enableEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
@@ -587,7 +597,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onRowEditSubmit?: ({
+    onEditSubmit?: ({
       row,
       tableInstance,
     }: {

package/src/body/MRT_TableBodyCell.tsx

@@ -16,6 +16,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     options: {
       enableClickToCopy,
       enableColumnPinning,
+      enableEditing,
       isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
@@ -93,19 +94,21 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id !==
             row.groupingColumnId) ? null : cell.getIsAggregated() ? (
         cell.renderAggregatedCell()
-      ) : column.enableEditing && currentEditingRow?.id === row.id ? (
+      ) : enableEditing &&
+        column.enableEditing !== false &&
+        currentEditingRow?.id === row.id ? (
         <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
       ) : (enableClickToCopy || column.enableClickToCopy) &&
         column.enableClickToCopy !== false ? (
         <>
           <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
-            {cell.renderCell()}
+            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           </MRT_CopyButton>
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>
       ) : (
         <>
-          {cell.renderCell()}
+          {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>
       )}

package/src/buttons/MRT_EditActionButtons.tsx

@@ -14,7 +14,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
-      onRowEditSubmit,
+      onEditSubmit,
       setCurrentEditingRow,
     },
   } = tableInstance;
@@ -27,7 +27,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
   };
 
   const handleSave = () => {
-    onRowEditSubmit?.({ row: currentEditingRow ?? row, tableInstance });
+    onEditSubmit?.({ row: currentEditingRow ?? row, tableInstance });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -27,7 +27,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
   const {
     getState,
     options: {
-      enableRowEditing,
+      enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
       renderRowActionMenuItems,
@@ -46,7 +46,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
-  const handleEdit = () => {
+  const handleStartEditMode = () => {
     setCurrentEditingRow({ ...row });
     setAnchorEl(null);
   };
@@ -57,9 +57,9 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
         <>{renderRowActions({ row, tableInstance })}</>
       ) : row.id === currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} tableInstance={tableInstance} />
-      ) : !renderRowActionMenuItems && enableRowEditing ? (
+      ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
-          <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
+          <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
             <EditIcon />
           </IconButton>
         </Tooltip>
@@ -82,7 +82,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
           </Tooltip>
           <MRT_RowActionMenu
             anchorEl={anchorEl}
-            handleEdit={handleEdit}
+            handleEdit={handleStartEditMode}
             row={row}
             setAnchorEl={setAnchorEl}
             tableInstance={tableInstance}

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,6 +1,12 @@
-import React, { ChangeEvent, FC, MouseEvent } from 'react';
+import React, {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  MouseEvent,
+  useState,
+} from 'react';
 import { TextField } from '@mui/material';
-import type { MRT_Cell, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -10,19 +16,28 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { enableRowEditing, muiTableBodyCellEditTextFieldProps },
+    options: {
+      enableEditing,
+      muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow,
+    },
   } = tableInstance;
 
+  const [value, setValue] = useState(cell.value);
+
   const { column, row } = cell;
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    column.onCellEditChange?.({ event, cell, tableInstance });
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (getState().currentEditingRow) {
-      row.values[column.id] = event.target.value;
-      // setCurrentEditingRow({
-      //   ...getState().currentEditingRow,
-      // });
+      row.values[column.id] = value;
+      setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
-    column.onCellEditChange?.({ event, cell, tableInstance });
+    column.onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -40,17 +55,18 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  if (enableRowEditing && column.enableEditing !== false && column.Edit) {
+  if (enableEditing && column.enableEditing !== false && column.Edit) {
     return <>{column.Edit?.({ cell, tableInstance })}</>;
   }
 
   return (
     <TextField
       margin="dense"
+      onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={column.header}
-      value={cell.value}
+      value={value}
       variant="standard"
       {...textFieldProps}
     />

package/src/localization.ts

@@ -33,6 +33,7 @@ export interface MRT_Localization {
   pinToLeft: string;
   pinToRight: string;
   rowActions: string;
+  rowNumber: string;
   rowNumbers: string;
   save: string;
   search: string;
@@ -89,6 +90,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
   rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',

package/src/menus/MRT_RowActionMenu.tsx

@@ -25,7 +25,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     getState,
     options: {
       icons: { EditIcon },
-      enableRowEditing,
+      enableEditing,
       localization,
       renderRowActionMenuItems,
     },
@@ -42,7 +42,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
         dense: isDensePadding,
       }}
     >
-      {enableRowEditing && (
+      {enableEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
           <Box sx={commonListItemStyles}>
             <ListItemIcon>

package/src/table/MRT_TableRoot.tsx

@@ -92,7 +92,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const displayColumns = useMemo(
     () =>
       [
-        (props.enableRowActions || props.enableRowEditing) &&
+        (props.enableRowActions || props.enableEditing) &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -142,7 +142,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         props.enableRowNumbers &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => cell.row.index + 1,
-            Header: () => '#',
+            Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             id: 'mrt-row-numbers',
             maxWidth: 40,
@@ -151,10 +151,12 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
+      table,
       props.enableExpandAll,
       props.enableExpanded,
       props.enableRowActions,
-      props.enableRowEditing,
+      props.enableGrouping,
+      props.enableEditing,
       props.enableRowNumbers,
       props.enableRowSelection,
       props.enableSelectAll,