feat(mui): editable Data Grid #5744

.changeset/honest-beds-rhyme.md

@@ -0,0 +1,10 @@
+---
+"@refinedev/mui": minor
+---
+
+feat: editable feature for MUI Data Grid #5656
+
+It is now possible to make MUI Data Grid editable by
+setting editable property on specific column.
+
+Resolves #5656

documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/index.md

@@ -270,6 +270,40 @@ const MyComponent = () => {
 
 When the `useDataGrid` hook is mounted, it will call the `subscribe` method from the `liveProvider` with some parameters such as `channel`, `resource` etc. It is useful when you want to subscribe to live updates.
 
+## Editing
+
+The hook can further extend editing provided in [`<DataGrid>`](https://mui.com/x/react-data-grid/editing/) component. To enable column editing, set `editable: "true"` on specific column definition.
+
+`useDataGrid` will utilize `processRowUpdate` from `<DataGrid>` component, which in turn will call [`useForm`](https://refine.dev/docs/data/hooks/use-form/) to attempt updating the row with the new value.
+
+```tsx
+const columns = React.useMemo<GridColDef<IPost>[]>(
+  () => [
+    {
+      field: "title",
+      headerName: "Title",
+      minWidth: 400,
+      flex: 1,
+      editable: true,
+    },
+  ],
+  [],
+);
+```
+
+Properties from [`useForm`](https://refine.dev/docs/data/hooks/use-form/), with exception of `autoSave`, `action` and `redirect`, are available in `useDataGrid`.
+
+The hook returns `onFinish`, `setId`, `id` and `formLoading` from `useForm`, which can be used to extend functionality.
+
+```tsx
+const {
+  dataGridProps,
+  formProps: { onFinish, setId, id, formLoading },
+} = useDataGrid<IPost>();
+```
+
+By default, the `onCellEditStart` and `onRowEditStart` callbacks from `<DataGrid>` will set the `id` on the form, and `processRowUpdate` will call `onFinish`.
+
 ## Properties
 
 ### resource

examples/table-material-ui-use-data-grid/cypress/e2e/all.cy.ts

@@ -171,4 +171,52 @@ describe("table-material-ui-use-data-grid", () => {
 
     cy.url().should("include", "current=1");
   });
+
+  it("should update a cell", () => {
+    cy.getMaterialUILoadingCircular().should("not.exist");
+
+    cy.intercept("/posts/*").as("patchRequest");
+
+    cy.getMaterialUIColumnHeader(1).click();
+
+    cy.get(".MuiDataGrid-cell").eq(1).dblclick();
+
+    cy.get(
+      ".MuiDataGrid-cell--editing > .MuiInputBase-root > .MuiInputBase-input",
+    )
+      .clear()
+      .type("Lorem ipsum refine!")
+      .type("{enter}");
+
+    cy.wait("@patchRequest");
+
+    cy.get(".MuiDataGrid-cell").eq(1).should("contain", "Lorem ipsum refine!");
+  });
+
+  it("should not update a cell", () => {
+    cy.getMaterialUILoadingCircular().should("not.exist");
+
+    cy.intercept("PATCH", "/posts/*", (request) => {
+      request.reply({
+        statusCode: 500,
+      });
+    }).as("patchRequest");
+
+    cy.getMaterialUIColumnHeader(1).click();
+
+    cy.get(".MuiDataGrid-cell").eq(1).dblclick();
+
+    cy.get(
+      ".MuiDataGrid-cell--editing > .MuiInputBase-root > .MuiInputBase-input",
+    )
+      .clear()
+      .type("Lorem ipsum fail!")
+      .type("{enter}");
+
+    cy.wait("@patchRequest");
+
+    cy.get(".MuiDataGrid-cell")
+      .eq(1)
+      .should("not.contain", "Lorem ipsum fail!");
+  });
 });

examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx

@@ -45,7 +45,13 @@ export const PostList: React.FC = () => {
         type: "number",
         width: 50,
       },
-      { field: "title", headerName: "Title", minWidth: 400, flex: 1 },
+      {
+        field: "title",
+        headerName: "Title",
+        minWidth: 400,
+        flex: 1,
+        editable: true,
+      },
       {
         field: "category.id",
         headerName: "Category",

packages/mui/src/hooks/useDataGrid/index.spec.ts

@@ -5,6 +5,7 @@ import { MockJSONServer, TestWrapper } from "@test";
 import { useDataGrid } from "./";
 import { CrudFilters } from "@refinedev/core";
 import { act } from "react-dom/test-utils";
+import { posts } from "@test/dataMocks";
 
 describe("useDataGrid Hook", () => {
   it("controlled filtering with 'onSubmit' and 'onSearch'", async () => {
@@ -198,4 +199,78 @@ describe("useDataGrid Hook", () => {
       expect(result.current.overtime.elapsedTime).toBeUndefined();
     });
   });
+
+  it("when processRowUpdate is called, update data", async () => {
+    let postToUpdate: any = posts[0];
+
+    const { result } = renderHook(
+      () =>
+        useDataGrid({
+          resource: "posts",
+          formProps: {
+            resource: "posts",
+          },
+        }),
+      {
+        wrapper: TestWrapper({
+          dataProvider: {
+            ...MockJSONServer,
+            update: async (data) => {
+              const resolvedData = await Promise.resolve({ data });
+              postToUpdate = resolvedData.data.variables;
+            },
+          },
+        }),
+      },
+    );
+
+    const newPost = {
+      ...postToUpdate,
+      title: "New title",
+    };
+
+    await act(async () => {
+      await result.current.dataGridProps.processRowUpdate(
+        newPost,
+        postToUpdate,
+      );
+    });
+
+    expect(newPost).toEqual(postToUpdate);
+  });
+
+  it("when update fails, return old data to row", async () => {
+    const { result } = renderHook(
+      () =>
+        useDataGrid({
+          resource: "posts",
+          formProps: {
+            resource: "posts",
+          },
+        }),
+      {
+        wrapper: TestWrapper({
+          dataProvider: {
+            ...MockJSONServer,
+            update: () => Promise.reject(),
+          },
+        }),
+      },
+    );
+
+    const oldPost = posts[0];
+
+    const newPost = {
+      ...oldPost,
+      title: "New title",
+    };
+
+    await act(async () => {
+      const returnValue = await result.current.dataGridProps.processRowUpdate(
+        newPost,
+        oldPost,
+      );
+      expect(returnValue).toEqual(oldPost);
+    });
+  });
 });

packages/mui/src/hooks/useDataGrid/index.ts

@@ -5,6 +5,9 @@ import {
   Pagination,
   pickNotDeprecated,
   Prettify,
+  useForm,
+  UseFormProps,
+  UseFormReturnType,
   useLiveMode,
   useTable as useTableCore,
   useTableProps as useTablePropsCore,
@@ -45,49 +48,65 @@ type DataGridPropsType = Required<
     | "disableRowSelectionOnClick"
     | "onStateChange"
     | "paginationMode"
+    | "processRowUpdate"
+    | "onCellEditStart"
+    | "onRowEditStart"
   >
 > &
   Pick<
     DataGridProps,
     "paginationModel" | "onPaginationModelChange" | "filterModel"
   >;
 
-export type UseDataGridProps<TQueryFnData, TError, TSearchVariables, TData> =
-  Omit<
-    useTablePropsCore<TQueryFnData, TError, TData>,
-    "pagination" | "filters"
-  > & {
-    onSearch?: (data: TSearchVariables) => CrudFilters | Promise<CrudFilters>;
-    pagination?: Prettify<
-      Omit<Pagination, "pageSize"> & {
-        /**
-         * Initial number of items per page
-         * @default 25
-         */
-        pageSize?: number;
-      }
-    >;
-    filters?: Prettify<
-      Omit<
-        NonNullable<useTablePropsCore<TQueryFnData, TError, TData>["filters"]>,
-        "defaultBehavior"
-      > & {
-        /**
-         * Default behavior of the `setFilters` function
-         * @default "replace"
-         */
-        defaultBehavior?: "replace" | "merge";
-      }
-    >;
-  };
+export type UseDataGridProps<
+  TQueryFnData extends BaseRecord,
+  TError extends HttpError,
+  TSearchVariables,
+  TData,
+> = Omit<
+  useTablePropsCore<TQueryFnData, TError, TData>,
+  "pagination" | "filters"
+> & {
+  onSearch?: (data: TSearchVariables) => CrudFilters | Promise<CrudFilters>;
+  pagination?: Prettify<
+    Omit<Pagination, "pageSize"> & {
+      /**
+       * Initial number of items per page
+       * @default 25
+       */
+      pageSize?: number;
+    }
+  >;
+  filters?: Prettify<
+    Omit<
+      NonNullable<useTablePropsCore<TQueryFnData, TError, TData>["filters"]>,
+      "defaultBehavior"
+    > & {
+      /**
+       * Default behavior of the `setFilters` function
+       * @default "replace"
+       */
+      defaultBehavior?: "replace" | "merge";
+    }
+  >;
+  formProps?: Omit<
+    UseFormProps<TQueryFnData, TError, TData>,
+    "autoSave" | "action" | "redirect"
+  >;
+};
 
 export type UseDataGridReturnType<
-  TData extends BaseRecord = BaseRecord,
+  TQueryFnData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,
   TSearchVariables = unknown,
+  TData extends BaseRecord = TQueryFnData,
 > = useTableReturnTypeCore<TData, TError> & {
   dataGridProps: DataGridPropsType;
   search: (value: TSearchVariables) => Promise<void>;
+  formProps: Pick<
+    UseFormReturnType<TQueryFnData, TError, TData>,
+    "onFinish" | "setId" | "id" | "formLoading"
+  >;
 };
 
 /**
@@ -134,12 +153,13 @@ export function useDataGrid<
   metaData,
   dataProviderName,
   overtimeOptions,
+  formProps,
 }: UseDataGridProps<
   TQueryFnData,
   TError,
   TSearchVariables,
   TData
-> = {}): UseDataGridReturnType<TData, TError, TSearchVariables> {
+> = {}): UseDataGridReturnType<TQueryFnData, TError, TSearchVariables, TData> {
   const theme = useTheme();
   const liveMode = useLiveMode(liveModeFromProp);
 
@@ -263,6 +283,16 @@ export function useDataGrid<
     };
   };
 
+  const { setId, onFinish, id, formLoading } = useForm<
+    TQueryFnData,
+    TError,
+    TData
+  >({
+    ...formProps,
+    action: "edit",
+    redirect: false,
+  });
+
   return {
     tableQueryResult,
     dataGridProps: {
@@ -310,6 +340,16 @@ export function useDataGrid<
           )}`,
         },
       },
+      processRowUpdate: async (newRow, oldRow) => {
+        try {
+          await onFinish(newRow);
+          return newRow;
+        } catch {
+          return oldRow;
+        }
+      },
+      onCellEditStart: (params) => setId(params?.id),
+      onRowEditStart: (params) => setId(params?.id),
     },
     current,
     setCurrent,
@@ -325,5 +365,11 @@ export function useDataGrid<
     search,
     createLinkForSyncWithLocation,
     overtime,
+    formProps: {
+      onFinish,
+      setId,
+      id,
+      formLoading,
+    },
   };
 }