[DataGrid] Add row editing feature

[m4theushw]

Closes #204
Based on #2087
Previews: https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/editing/#row-editing

Based on the benchmarks, I think that the easiest path to implement this feature is to leverage the current cell editing, but with the difference that the value is committed once for the entire row, instead of on each cell change. There's already an editMode prop which is not being used, so I'm repurposing it to be used to choose between cell and row.

TODO

• Tests
• Update docs
• Add onEditRowChangeCommit prop
• Update edit components to support the row editing (select shouldn't open straightaway)

[oliviertassinari]

It looks like an awesome starting point!

[oliviertassinari]

1. We can remove "Row & Cell editing", it's here
   https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/#upcoming-features
2. It's done? https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/getting-started/#feature-comparison

3. The colors feel like a play garden 😁 cc @danilo-leal

https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/editing/#control-with-external-buttons

4. On this demo https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/editing/#conditional-validation, the state is lost, sometimes

state.lost.issue.mp4

[m4theushw]

On this demo https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/editing/#conditional-validation, the state is lost, sometimes

@oliviertassinari I couldn't reproduce it consistently, it happened almost randomly here. I suppose it loses the state because the time between clicks is too small. There's the first click, the internal state is updated with the new value, then it calls onEditRowsModelChange which also causes a rerender, but when it's called the second click already happened. I propose to debounce in a second PR the value update of each edit component:

https://github.com/mui-org/material-ui-x/blob/aa637c3eabcfad097b2c59af5f4efcf4041080d3/packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx#L38

If you open this other demo in local host https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/editing/#client-side-validation, the UX of erasing the content of the text input is not good. It's lagging because there's a rerender each time a character is pressed.

[DanailH]

Should we move those in the classes constant? Or better yet with GridClasses from here #2320

[m4theushw]

I'll keep as it is, then after #2320 I change to use gridClasses.

[DanailH]

I tested it and it is an awesome feature 🚀.

The only thing I was able to find is when you add new rows and the rows exceed the overflow of the window you are not automatically scrolled to the newly created row. It makes sense for the user to get scrolled to that row since when you create it it is in edit mode. The same happens when you use pagination and you have a pageSize=5 and you have 5 rows but then you add another one, which goes to the next page - it makes sense for the pagination to open the second page.

[m4theushw]

The only thing I was able to find is when you add new rows and the rows exceed the overflow of the window you are not automatically scrolled to the newly created row.

Now it's scrolling to the new row.

The same happens when you use pagination and you have a pageSize=5 and you have 5 rows but then you add another one, which goes to the next page - it makes sense for the pagination to open the second page.

Interesting, we could investigate how to make scrollToIndexes support pagination.

[oliviertassinari]

I have personally seen enough. Happy to go to production with the current version. I have left more comments to polish. Great work, well done!

On this demo https://deploy-preview-2098--material-ui-x.netlify.app/components/data-grid/editing/#conditional-validation, the state is lost, sometimes

I have found it using console.warn to get the stack track. It wasn't easy, took me half an hour! The reset happens when the double click triggers. I have pushed a commit 35df73f that replicates the same logic of setCellMode in setRowMode. We can skip the whole section if we are already in edit mode. Fixed

It's lagging because there's a rerender each time a character is pressed.

I remember making the same point to Damien in a PR"s review. One possible solution could be to keep the state of the input local, and only sync with the parent data grid on commits.

We could investigate how to make scrollToIndexes support pagination.

We could, maybe we should wait for a developer to complain?

[oliviertassinari]

🎊