feat(mui): editable Data Grid

[beg1c]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention

Bugs / Features

• Related issue(s) linked
• Tests for the changes have been added
• Docs have been added / updated
• Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

What is the new behavior?

Data Grid can now be edited by specifying editable property on DataGrid column definition, just as in MUI Data Grid documentation. useDataGrid will now utilize existing Data Grid props processRowUpdate, onRowEditStart and onCellEditStart to update resource whenever processRowUpdate is triggered.

fixes #5656 (issue)

Notes for reviewers

This is lightweight implementation of this functionality, using only existing Data Grid props. This functionality can be later extended for handling multiline editing.

processRowUpdate must return value to Data Grid, that is why we must return oldRow if mutation does not succeed.

I've set title column on examples/table-material-ui-use-data-grid as editable.

[changeset-bot]

🦋 Changeset detected

Latest commit: 09f8f2d

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 09f8f2d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 23 targets

• lerna run cypress:run --scope with-remix-material-ui -- --record --key --group with-remix-material-ui
• lerna run cypress:run --scope with-nextjs-next-auth -- --record --key --group with-nextjs-next-auth
• lerna run cypress:run --scope table-material-ui-use-update-many -- --record --key --group table-material-ui-use-update-many
• lerna run cypress:run --scope table-material-ui-use-delete-many -- --record --key --group table-material-ui-use-delete-many
• lerna run cypress:run --scope table-material-ui-use-data-grid -- --record --key --group table-material-ui-use-data-grid
• lerna run cypress:run --scope table-material-ui-table-filter -- --record --key --group table-material-ui-table-filter
• lerna run cypress:run --scope inferencer-graphql-hasura -- --record --key --group inferencer-graphql-hasura
• lerna run cypress:run --scope inferencer-mantine -- --record --key --group inferencer-mantine
• lerna run cypress:run --scope base-material-ui -- --record --key --group base-material-ui
• lerna run cypress:run --scope table-material-ui-data-grid-pro -- --record --key --group table-material-ui-data-grid-pro
• lerna run cypress:run --scope inferencer-antd -- --record --key --group inferencer-antd
• lerna run cypress:run --scope form-material-ui-use-drawer-form -- --record --key --group form-material-ui-use-drawer-form
• lerna run cypress:run --scope auth-material-ui -- --record --key --group auth-material-ui
• lerna run cypress:run --scope table-material-ui-cursor-pagination -- --record --key --group table-material-ui-cursor-pagination
• lerna run cypress:run --scope inferencer-chakra-ui -- --record --key --group inferencer-chakra-ui
• lerna run cypress:run --scope form-material-ui-use-modal-form -- --record --key --group form-material-ui-use-modal-form
• lerna run cypress:run --scope table-material-ui-advanced -- --record --key --group table-material-ui-advanced
• lerna run cypress:run --scope form-material-ui-mutation-mode -- --record --key --group form-material-ui-mutation-mode
• lerna run cypress:run --scope form-material-ui-use-steps-form -- --record --key --group form-material-ui-use-steps-form
• lerna run cypress:run --scope form-material-ui-use-form -- --record --key --group form-material-ui-use-form
• lerna run cypress:run --scope inferencer-headless -- --record --key --group inferencer-headless
• lerna run cypress:run --scope server-side-form-validation-material-ui -- --record --key --group server-side-form-validation-material-ui
• lerna run cypress:run --scope inferencer-material-ui -- --record --key --group inferencer-material-ui

---

Sent with 💌 from NxCloud.

[beg1c]

Some problems occurred because my fork was not completely synced. Resolved it now.

[BatuhanW]

Hey @beg1c thanks for the PR! Added some comments.

[beg1c]

@BatuhanW Added tests and some changes. I'd appreciate it if you could take a look when you have a moment. I plan to update the documentation later since there might be more changes before merging. Additionally, it seems we're lacking functionality where the user can call useForm with different action based on the call. This would enable users to extend the functionality and create new rows in the DataGrid, not just edit existing ones. Same goes for delete. I will look into it more when I catch time.

[BatuhanW]

@BatuhanW Added tests and some changes. I'd appreciate it if you could take a look when you have a moment. I plan to update the documentation later since there might be more changes before merging. Additionally, it seems we're lacking functionality where the user can call useForm with different action based on the call. This would enable users to extend the functionality and create new rows in the DataGrid, not just edit existing ones. Same goes for delete. I will look into it more when I catch time.

@beg1c appreciate the effort! Looks good initially, I'll review more in detail later. Also cc @aliemir @alicanerdurmaz

[beg1c]

@BatuhanW @alicanerdurmaz updated docs. Do you think we should accept boolean editable as prop to useDataGrid or is this PR over?

For further usage I don't think we need that prop, but we could break older versions if we don't accept it. If some users have their own implementation of editable datagrid, and they didn't declare processRowUpdate on <DataGrid /> component, <DataGrid /> processRowUpdate will trigger our useForm onFinish every time column is commited.

So for example if someone defined their data grid as:

<DataGrid
    {...dataGridProps}
    columns={columns}
    onRowEditStart={ownSetIdFunction}
    onRowEditCommit={ownMutateFunction}
/>

which is wrong as processRowUpdate should be used for migrations from DataGrid version 6, our processRowUpdate from ...dataGridProps spread could break that functionality.

I don't know, what do you think?

[alicanerdurmaz]

@BatuhanW @alicanerdurmaz updated docs. Do you think we should accept boolean editable as prop to useDataGrid or is this PR over?

For further usage I don't think we need that prop, but we could break older versions if we don't accept it. If some users have their own implementation of editable datagrid, and they didn't declare processRowUpdate on <DataGrid /> component, <DataGrid /> processRowUpdate will trigger our useForm onFinish every time column is commited.

So for example if someone defined their data grid as:

<DataGrid
    {...dataGridProps}
    columns={columns}
    onRowEditStart={ownSetIdFunction}
    onRowEditCommit={ownMutateFunction}
/>

which is wrong as processRowUpdate should be used for migrations from DataGrid version 6, our processRowUpdate from ...dataGridProps spread could break that functionality.

I don't know, what do you think?

I believe you are right. We should accept editable prop.

something like this:

useForm({
  queryOptions: {
    enabled: editable,
  },
});

processRowUpdate: async (newRow, oldRow) => {
   if(!editable) return
   /* .... */
}
  

[BatuhanW]

Hey @beg1c we've merged releases/april branch, could you re-open your PR?