feat(mui): editable Data Grid #5744

[lnikitadobrenkol]

Bugs / Features

This PR introduces the ability to make MUI Data Grid columns editable by setting an editable property on specific column definitions.

What is the current behavior?

Currently, the MUI Data Grid does not support inline editing directly through configuration.

What is the new behavior?

With the changes in this PR, developers can now configure columns to be editable directly from the MUI Data Grid setup, enhancing the grid's flexibility for various use cases.

fixes # (5656)

Notes for reviewers

I have extensively tested the functionality introduced in this PR, primarily based on the initial implementation by @beg1c. After setting up a test project to integrate the enhanced dataGridHook, it has met the expected outcomes. I encourage a thorough review to ensure that all aspects of the new editable feature align with our project standards and user requirements. Please provide feedback or suggest improvements if you identify potential enhancements or adjustments. I am open to discussions and willing to make any necessary changes to perfect this feature.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8cb1394

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

This PR includes changesets to release 2 packages

Name	Type
@refinedev/mui	Minor
@refinedev/core	Patch

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

[aliemir]

Hey @lnikitadobrenkol thank you for the PR! Do you think using useForm has any advantages over useUpdate in this specific case? Since useForm features are mostly disabled and action is hardcoded to "edit", I think we can use useUpdate and have a simpler implementation by omitting id and setId 🤔

[lnikitadobrenkol]

Hello @aliemir
I've been working on enhancing the useDataGrid hook to handle errors and state more robustly, specifically around reverting to original data when updates fail. However, I’m stuck with an issue where, despite the update operation being rejected (we simulate this in tests), the function still returns the modified data instead of the original.

Here’s the quick rundown:
Function: processRowUpdate
Expected: Return old data on update failure.
Actual: It returns the new, incorrect data.

I’ve spent quite a few hours on this and tried various fixes, but no luck so far. Could you please help me with this – any commits, examples, ideas or suggestions would be greatly appreciated!
We can arrange a short call if needed - so I can share the screen to show what exactly I am doing, (maybe I completely on the wrong direction)

[chatpong-v]

To update feature

[lnikitadobrenkol]

@BatuhanW @aliemir Hey guys! I need your help in implementing useUpdate. Please have a look

[aliemir]

Hey @lnikitadobrenkol i'll try to check your comment today and get back to you 🙏

[lnikitadobrenkol]

Hi @aliemir, I think I was finally able to resolve the issue and updated the PR 👾! Please review the latest commit and let me know if further adjustments are needed. I would appreciate your feedback to ensure everything meets the standards.
And I would need a help with the cypress end-to-end test for sure, I have almost no experience writing them

[aliemir]

Hey @lnikitadobrenkol thank you for the updates! Looks great! I've just left couple of comments to improve the usage and remove some unnecessary stuff. Can you work on those?

I'll also try to check the e2e tests and provide a review for it 🚀

Thanks again for the great work 👏 👏

[lnikitadobrenkol]

@aliemir Thank you for the detailed review!! It really helps, appreciate it. Sure, I'll have a look at the comments and commit the fix as soon as possible for me

[lnikitadobrenkol]

@aliemir I updated the PR based on your feedback. Please have a look and and let me know if we can proceed or more changes are required

[lnikitadobrenkol]

@aliemir @BatuhanW @omeraplak Hey guys! I think I found the way to fix cypress e2e tests, just made the commit. Could you please review the PR - and let's fix any problem that are left, and proceed with this issue further?

[aliemir]

Left two small comments that we can work on. Thank you for the changes, e2e test looks great! I'll also try to test this feature myself in my local 🤞

Let me know if you can work on the comments, if not I can try to take a look at them myself 🙏

[lnikitadobrenkol]

Thank you! I'll have a look at the comments and work on the fix this week.
Sure, please let me know how you find this feature locally and if there is anything we can improve

[lnikitadobrenkol]

@aliemir hello! I implemented the changes you suggested, please have a look

[aliemir]

Hey @lnikitadobrenkol found some issues with the implementation and the example was using a custom processRowUpdate rather than the one from useDataGrid, was that intentional?

Updated the code for processRowUpdate and updated the example code. While doing so, also had a small update in the core package to export the required types and updated the type import for UseUpdateProps.

[lnikitadobrenkol]

Hey @aliemir!
No, it was not intentional - I guess I missed it somehow.
Thank you for spotting it, and doing other updates - looks great!

[lnikitadobrenkol]

@aliemir What do you think - are we ready to merge the PR or there is something else left to work on?

[lnikitadobrenkol]

@aliemir @BatuhanW
Could you please review this PR whenever it's convenient for you and let me know if it's ready to be merged? I'd love to include this feature in the July release. I'll be on vacation from June 22-29, so if any changes are needed, it would be great to address them this week.

[aliemir]

Hey @lnikitadobrenkol We'll merge this PR to be included in our next release. In the context of this feature, we don't require any additional changes, thank you for your contribution 🙏