[DataGrid] Implement Cell editing

[0xMarkian]

As far as I understood material-ui follows Material Design spec

Material-UI is a set of React components that implement Google's Material Design specification.

But as for me it lacks in following the specification in some components, especially in Table component.
https://material.google.com/components/data-tables.html#data-tables-interaction (Edit section). The specification clearly says about the edit possibility with the help of small or large edit dialogs. But using material-ui Table component it's impossible to organize something like this because cell clicks always trigger row selection.

So my proposition here is to divide concepts following Google's Material Design and make:

1. Row selection
   • on desktop: only with checkbox(additionally we can add the possibility to select row with ctrl button)
   • on mobile: with checkbox or with long press action.
2. Cell edit: click on cell.

So what do you guys think about this?

[sabbaticaldev]

I'm looking for this too. Any solution?

[0xMarkian]

@alitaheri @hai-cea @mbrookes @newoga @oliviertassinari
I have a solution and can create a PR for this. The question is what do you guys think about this?
As for me this is a critic feature adding that has to made ASAP to give people the possibility to have editable cells.

[oliviertassinari]

@markwain The Table has been migrated to the new styling approach on the next branch. Would be great if you can have a look to see what is missing from a material specification point of view.

The editable cells is definitely a great feature to have 👍

[0xMarkian]

@oliviertassinari Sorry for long reply ... I will definitely look at it.

[rburkovsky]

I was just looking for a component that can represent an editable data grid. It would be super-nice to have this ability.

[KarmicJohn]

Also interested in this. Will this make the 1.0 cut?

[oliviertassinari]

@KarmicJohn It's unlikely unless an external contributor is working on it.

[jstgermain]

Any update on this feature? I dont see anything in v1 beta 30, and am looking for this exact feature.

[FernandoGOT]

I too need such a feature, any news bout this?

[srilman]

First of all, just want to point out that there are two kinds of editable table cells: one with an inline text field and another with an inline menu. (Source: https://material.io/design/components/data-tables.html#behavior).

Anyways, I am planning on making a PR for this because I need to make this element for a project. I am thinking that the syntax for the inline text field should look sometime like this:

<TableCell editable={true|false} dialogSize={'large'|'small'} editIcon={<SomeIcon />} />

and for the inline menu, it should look something like this:

<TableCell menu={<Menu><MenuItem /> ....</Menu>}></TableCell>

I am also trying to decide on whether or not to add menu and editable to the list of variants for the table cell and choose between them (like how you can switch between types of buttons in the <Button /> component.

[oliviertassinari]

@srilman Does it need to be moved to the core? With the recent addition of the Popper component. I'm wondering if a simple demo in the documentation would be better suited. To investigate.

[srilman]

@oliviertassinari I don't think this component needs to be in core. Putting it in the lab should be fine. I'm not sure how the Popper component relates, and adding a demo to investigate would be helpful.

[jstgermain]

What ever came of this? I still don't see any docs in order to use small or large edit dialogs.

[joshwooding]

Looks like the specs have changed and currently only list an inline menu: https://material.io/design/components/data-tables.html#behavior

Although it's not perfect here's an example: https://codesandbox.io/s/material-demo-dlmkz

[oliviertassinari]

material-tables has an editable example: https://material-table.com/#/docs/features/editable.

[adeelibr]

I made rough demo like materia;-ui tables section with an editable table example like this;

Code + Demo: https://codesandbox.io/s/material-ui-editable-tables-wsp0c
Demo: https://wsp0c.csb.app/

(I'll improve the demo, if you think it's okay 😄 ) @oliviertassinari 😅 😅

[oliviertassinari]

@adeelibr Thanks for sharing the code sandbox on the issue, It will likely help others.
Now, I'm not sure that we should add a new demo in the documentation. I think that we should work on a new datatable component. I think that we could have the Table component focuses on the style aspect on the table while the datatable would focus on the feature richness. This would be an opportunity to move the complex demos we have from the table component page to the datatable part of the documentation.

[adeelibr]

Can I work on the new component for Data table? Also will it be build on top of Table components with extended functionality?

[oliviertassinari]

@adeelibr See mui/material-ui#17848 (comment)

[oliviertassinari]

Moving to #203