Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(mui): editable Data Grid #5744

Closed
wants to merge 12 commits into from
Closed

Conversation

beg1c
Copy link
Contributor

@beg1c beg1c commented Mar 13, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

Bugs / Features

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.

@beg1c beg1c requested a review from a team as a code owner March 13, 2024 08:39
Copy link

changeset-bot bot commented Mar 13, 2024

🦋 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

Copy link

nx-cloud bot commented Mar 13, 2024

☁️ 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

Sent with 💌 from NxCloud.

@beg1c
Copy link
Contributor Author

beg1c commented Mar 13, 2024

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

Copy link
Member

@BatuhanW BatuhanW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/mui/src/hooks/useDataGrid/index.ts Outdated Show resolved Hide resolved
packages/mui/src/hooks/useDataGrid/index.ts Outdated Show resolved Hide resolved
packages/mui/src/hooks/useDataGrid/index.ts Outdated Show resolved Hide resolved
@beg1c
Copy link
Contributor Author

beg1c commented Mar 19, 2024

@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 beg1c requested a review from BatuhanW March 19, 2024 09:03
@BatuhanW
Copy link
Member

@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

@BatuhanW BatuhanW added this to the April Release milestone Mar 20, 2024
Co-authored-by: Alican Erdurmaz <[email protected]>
@BatuhanW BatuhanW changed the base branch from master to releases/april March 21, 2024 06:59
@beg1c
Copy link
Contributor Author

beg1c commented Mar 21, 2024

@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
Copy link
Member

@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 BatuhanW modified the milestones: April Release, May Release Apr 1, 2024
@BatuhanW BatuhanW deleted the branch refinedev:releases/april April 3, 2024 06:46
@BatuhanW BatuhanW closed this Apr 3, 2024
@BatuhanW
Copy link
Member

BatuhanW commented Apr 3, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEAT] Editable MUI Data Grid
3 participants