material-react-table 0.7.2 → 0.7.3

package/package.json

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

@@ -99,6 +99,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
   };
+  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell<D> | null>>;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
   setCurrentFilterTypes: Dispatch<
     SetStateAction<{
@@ -116,6 +117,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   TableState,
   'pagination'
 > & {
+  currentEditingCell: MRT_Cell<D> | null;
   currentEditingRow: MRT_Row<D> | null;
   currentFilterTypes: Record<string, string | Function>;
   currentGlobalFilterType: Record<string, string | Function>;
@@ -261,9 +263,11 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     tableInstance: MRT_TableInstance<D>;
   }) => void;
   onColumnFilterValueChange?: ({
+    column,
     event,
     filterValue,
   }: {
+    column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
   }) => void;
@@ -322,6 +326,7 @@ export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
 export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
+    editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableDensePaddingToggle?: boolean;
@@ -557,6 +562,33 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
+    onCellEditBlur?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      event: FocusEvent<HTMLInputElement>;
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onCellEditChange?: ({
+      cell,
+      event,
+      tableInstance,
+    }: {
+      event: ChangeEvent<HTMLInputElement>;
+      cell: MRT_Cell<D>;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onColumnFilterValueChange?: ({
+      column,
+      event,
+      filterValue,
+    }: {
+      column: MRT_Column<D>;
+      event: ChangeEvent<HTMLInputElement>;
+      filterValue: any;
+    }) => void;
     onDetailPanelClick?: ({
       event,
       row,
@@ -724,6 +756,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
+  editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
   enableColumnResizing = false,
@@ -754,6 +787,7 @@ export default <D extends Record<string, any> = {}>({
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
+    editingMode={editingMode}
     enableColumnActions={enableColumnActions}
     enableColumnResizing={enableColumnResizing}
     enableColumnFilters={enableColumnFilters}

package/src/body/MRT_TableBodyCell.tsx

@@ -14,17 +14,20 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getIsSomeColumnsPinned,
     getState,
     options: {
+      editingMode,
       enableClickToCopy,
-      enablePinning,
       enableEditing,
+      enablePinning,
+      idPrefix,
       isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
     },
+    setCurrentEditingCell,
   } = tableInstance;
 
-  const { currentEditingRow, isDensePadding } = getState();
+  const { currentEditingCell, currentEditingRow, isDensePadding } = getState();
 
   const { column, row } = cell;
 
@@ -53,13 +56,43 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     [column.columnDefType, column.getWidth()],
   );
 
+  const isEditable =
+    (enableEditing || column.enableEditing) && column.enableEditing !== false;
+
+  const isEditing =
+    isEditable &&
+    (editingMode === 'table' ||
+      currentEditingRow?.id === row.id ||
+      currentEditingCell?.id === cell.id);
+
+  const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
+    if (
+      (enableEditing || column.enableEditing) &&
+      column.enableEditing !== false &&
+      editingMode === 'cell'
+    ) {
+      setCurrentEditingCell(cell);
+      setTimeout(() => {
+        const textField = document.getElementById(
+          `mrt-${idPrefix}-edit-cell-text-field-${cell.id}`,
+        ) as HTMLInputElement;
+        if (textField) {
+          textField.focus();
+          textField.select();
+        }
+      }, 200);
+    }
+  };
+
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.({ event, cell, tableInstance })
       }
+      onDoubleClick={handleDoubleClick}
       {...tableCellProps}
       sx={{
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         maxWidth: `min(${column.getWidth()}px, fit-content)`,
         minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
         p: isDensePadding
@@ -97,9 +130,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id !==
             row.groupingColumnId) ? null : cell.getIsAggregated() ? (
         cell.renderAggregatedCell()
-      ) : enableEditing &&
-        column.enableEditing !== false &&
-        currentEditingRow?.id === row.id ? (
+      ) : isEditing ? (
         <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
       ) : (enableClickToCopy || column.enableClickToCopy) &&
         column.enableClickToCopy !== false ? (

package/src/buttons/MRT_CopyButton.tsx

@@ -56,6 +56,7 @@ export const MRT_CopyButton: FC<Props> = ({
           backgroundColor: 'transparent',
           border: 'none',
           color: 'inherit',
+          cursor: 'copy',
           fontFamily: 'inherit',
           fontSize: 'inherit',
           letterSpacing: 'inherit',

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,7 +16,14 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    options: {
+      idPrefix,
+      enableEditing,
+      muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur,
+      onCellEditChange,
+    },
+    setCurrentEditingCell,
     setCurrentEditingRow,
   } = tableInstance;
 
@@ -27,6 +34,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     column.onCellEditChange?.({ event, cell, tableInstance });
+    onCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -34,7 +42,9 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       row.values[column.id] = value;
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
+    setCurrentEditingCell(null);
     column.onCellEditBlur?.({ event, cell, tableInstance });
+    onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -58,6 +68,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   return (
     <TextField
+      id={`mrt-${idPrefix}-edit-cell-text-field-${cell.id}`}
       margin="dense"
       onBlur={handleBlur}
       onChange={handleChange}

package/src/table/MRT_TableRoot.tsx

@@ -14,7 +14,13 @@ import {
   getCoreRowModelSync,
   ColumnDef,
 } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType, MRT_Row, MRT_TableInstance } from '..';
+import {
+  MRT_Cell,
+  MRT_ColumnDef,
+  MRT_FilterType,
+  MRT_Row,
+  MRT_TableInstance,
+} from '..';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
@@ -41,8 +47,12 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.idPrefix],
   );
 
-  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
-    null,
+  const [currentEditingCell, setCurrentEditingCell] =
+    useState<MRT_Cell<D> | null>(
+      props.initialState?.currentEditingCell ?? null,
+    );
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
+    props.initialState?.currentEditingRow ?? null,
   );
   const [isDensePadding, setIsDensePadding] = useState(
     props.initialState?.isDensePadding ?? false,
@@ -87,7 +97,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const displayColumns = useMemo(
     () =>
       [
-        (props.enableRowActions || props.enableEditing) &&
+        (props.enableRowActions ||
+          (props.enableEditing && props.editingMode === 'row')) &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -146,6 +157,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
+      props.editingMode,
       props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
@@ -210,6 +222,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       columns,
       data,
       state: {
+        currentEditingCell,
         currentEditingRow,
         currentFilterTypes,
         currentGlobalFilterType,
@@ -222,6 +235,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       },
     }),
+    //@ts-ignore
+    setCurrentEditingCell,
+    //@ts-ignore
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,