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

.changeset/orange-seals-brush.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/core": patch
+---
+
+chore(core): add missing types of data hooks
+
+Added missing props and return types of data hooks.

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

@@ -270,6 +270,71 @@ 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 `useDataGrid` hook extends the editing capabilities provided by the [`<DataGrid>`](https://mui.com/x/react-data-grid/editing/) component from MUI. To enable column editing, set `editable: "true"` on specific column definitions.
+
+`useDataGrid` leverages [`useUpdate`](https://refine.dev/docs/data/hooks/use-update/) for direct integration with update operations. This change enhances performance and simplifies the interaction model by directly using the update mechanisms provided by Refine.
+
+Here is how you can define columns to be editable:
+
+```tsx
+const columns = React.useMemo<GridColDef<IPost>[]>(
+  () => [
+    {
+      field: "title",
+      headerName: "Title",
+      minWidth: 400,
+      flex: 1,
+      editable: true,
+    },
+  ],
+  [],
+);
+```
+
+### Handling Updates
+
+With the integration of `useUpdate`, processRowUpdate from [`<DataGrid>`](https://mui.com/x/react-data-grid/editing/) directly interacts with the backend. This method attempts to update the row with the new values, handling the update logic internally.
+
+The hook now simplifies the handling of updates by removing the need for managing form state transitions explicitly:
+
+```tsx
+const {
+  dataGridProps,
+  formProps: { processRowUpdate, formLoading },
+} = useDataGrid<IPost>();
+```
+
+By default, when a cell edit is initiated and completed, the processRowUpdate function will be triggered, which will now use the mutate function from useUpdate to commit changes.
+
+```tsx
+const processRowUpdate = async (newRow: TData, oldRow: TData) => {
+  try {
+    await new Promise((resolve, reject) => {
+      mutate(
+        {
+          resource: resourceFromProp as string,
+          id: newRow.id as string,
+          values: newRow,
+        },
+        {
+          onError: (error) => {
+            reject(error);
+          },
+          onSuccess: (data) => {
+            resolve(data);
+          },
+        },
+      );
+    });
+    return newRow;
+  } catch (error) {
+    return oldRow;
+  }
+};
+```
+
 ## 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

@@ -14,6 +14,7 @@ export const PostList: React.FC = () => {
   const { dataGridProps } = useDataGrid<IPost>({
     initialCurrent: 1,
     initialPageSize: 10,
+    editable: true,
     initialSorter: [
       {
         field: "title",
@@ -45,7 +46,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/core/src/hooks/data/index.ts

@@ -1,18 +1,34 @@
-export { useList } from "./useList";
-export { useOne } from "./useOne";
-export { useMany } from "./useMany";
+export { useList, UseListProps } from "./useList";
+export { useOne, UseOneProps } from "./useOne";
+export { useMany, UseManyProps } from "./useMany";
 
-export { useUpdate } from "./useUpdate";
-export { useCreate, UseCreateReturnType } from "./useCreate";
-export { useDelete } from "./useDelete";
+export { useUpdate, UseUpdateProps, UseUpdateReturnType } from "./useUpdate";
+export { useCreate, UseCreateProps, UseCreateReturnType } from "./useCreate";
+export { useDelete, UseDeleteProps, UseDeleteReturnType } from "./useDelete";
 
-export { useCreateMany, UseCreateManyReturnType } from "./useCreateMany";
-export { useUpdateMany } from "./useUpdateMany";
-export { useDeleteMany } from "./useDeleteMany";
+export {
+  useCreateMany,
+  UseCreateManyProps,
+  UseCreateManyReturnType,
+} from "./useCreateMany";
+export {
+  useUpdateMany,
+  UseUpdateManyProps,
+  UseUpdateManyReturnType,
+} from "./useUpdateMany";
+export {
+  useDeleteMany,
+  UseDeleteManyProps,
+  UseDeleteManyReturnType,
+} from "./useDeleteMany";
 
 export { useApiUrl } from "./useApiUrl";
-export { useCustom } from "./useCustom";
-export { useCustomMutation } from "./useCustomMutation";
+export { useCustom, UseCustomProps } from "./useCustom";
+export {
+  useCustomMutation,
+  UseCustomMutationProps,
+  UseCustomMutationReturnType,
+} from "./useCustomMutation";
 
 export { useDataProvider } from "./useDataProvider";
-export { useInfiniteList } from "./useInfiniteList";
+export { useInfiniteList, UseInfiniteListProps } from "./useInfiniteList";

packages/core/src/hooks/data/useUpdateMany.ts

@@ -134,7 +134,7 @@ type UpdateManyParams<TData, TError, TVariables> = {
   { ids: BaseKey[]; values: TVariables }
 >;
 
-type UseUpdateManyReturnType<
+export type UseUpdateManyReturnType<
   TData extends BaseRecord = BaseRecord,
   TError extends HttpError = HttpError,
   TVariables = {},

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

@@ -5,6 +5,7 @@ import { MockJSONServer, TestWrapper } from "@test";
 import { useDataGrid } from "./";
 import type { 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,42 @@ 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",
+          editable: true,
+        }),
+      {
+        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 () => {
+      if (result.current.dataGridProps.processRowUpdate) {
+        await result.current.dataGridProps.processRowUpdate(
+          newPost,
+          postToUpdate,
+        );
+      }
+    });
+
+    expect(newPost).toEqual(postToUpdate);
+  });
 });