[DataGrid] Implement Cell editing

[oliviertassinari]

Benchmark

• https://www.ag-grid.com/javascript-grid-cell-editing/
• https://ant.design/components/table/#components-table-demo-edit-cell
• https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/
• https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/editing/
• https://www.jqwidgets.com/react/react-grid/#https://www.jqwidgets.com/react/react-grid/react-grid-editing.htm
• https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RowEditingAndEditingEvents/React/Light/
• http://tabulator.info/docs/4.5/edit
• https://react-table.tanstack.com/docs/examples/editable-data
• https://primefaces.org/primereact/showcase/#/datatable/edit

This feature is also related to the editable row #204.

[raajmayukh]

@oliviertassinari Can I get an idea on ETA for this enhancement? I do see that row editing is planned for Q4, so would cell editing be part of that enhancement as it's related? https://github.com/mui-org/material-ui-x/projects/1

[oliviertassinari]

@raajmayukh We are focusing on #201. This one will probably land in 2021.

[rgins16]

@oliviertassinari Are you planning on implementing this for columns as well? I would like to change the headerName.

[oliviertassinari]

@rgins16 We won't handle the header in the first iteration. I can't say for the following ones. The most common use case is to change the cells, only. So far, we plan this feature for Q1 2021.

[Samurus]

@oliviertassinari I miss primefaces/primereact in the list for Benchmark: https://primefaces.org/primereact/showcase/#/datatable/edit It seems to be free and open source which is a great plus.

[oliviertassinari]

@Samurus Thanks for linking the reference to primeface. Mind that the plan is to make this feature in the MIT version: https://material-ui.com/components/data-grid/getting-started/#feature-comparison.

[arheinjohnson]

Any idea how soon this will be implemented?

[dtassone]

We have merged the last PR for the implementation. We still have to finish the documentation, and if it all goes well it should be released next week or the week after.

[raajmayukh]

@oliviertassinari @dtassone Thanks guys for tackling that. I know I had reached out in November last year for this feature and subsequently implemented through react-table. But this is something that I would check to see if this one works even better. Thanks again. Cheers!!

[angelhd1999]

We have merged the last PR for the implementation. We still have to finish the documentation, and if it all goes well it should be released next week or the week after.

@dtassone I've been doing a project with Material-UI for some time and if I can take advantage of this it would be great. Could you tell me if cell editing will allow advanced ways of editing like selecting between different options or a date picker? I ask it to know if I have to think of a different approach or it is worth waiting for me. Thank you very much for the effort you make.

[khanzzirfan]

Just FYI: I have used the alpha release of the cell edit feature. Its looks good. Thank you for the support. But below are few things doesn't work.

• Select dropdown not working with cell edit feature. Need more info, if I'm doing something incorrect. @angelhd1999 @oliviertassinari

[oliviertassinari]

@khanzzirfan Related to #1320. If you have a reproduction, please open a new issue.

[oliviertassinari]

The documentation for this feature can now be found at https://material-ui.com/components/data-grid/editing/#cell-editing.