[DataGrid] Add props to control cell mode #4210

m4theushw · 2022-03-16T23:22:09Z

Preview: https://deploy-preview-4210--material-ui-x.netlify.app/x/react-data-grid/editing/#controlled-mode

This PR adds props to start or stop the edit mode of a cell/row. The following props were added:

cellModesModel
rowModesModel
onCellModesModelChange
onRowModesModelChange

Different from other controllable states, here we don't react simply when the prop value changes. It has to change but also the mode needs to be different from the previous mode. These props work by storing the params that we should pass to startXXXEditMode and stopXXXEditMode when the mode is changed. For the implementation, I created a parallel state variable only to track the params. Now we have state.editRows, which tracks the props for the edit cells, and the state variable storing the params. I didn't merge both states because I don't want to recreate the model when, for exampe, only the value changes. To react to changes in the model, I moved everything from startXXXEditMode and stopXXXEditMode to helper methods updateStateToStartXXXEditMode and updateStateToStopXXXEditMode. The role of the public API methods now is to only update the model.

mui-bot · 2022-03-16T23:28:15Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	279.6	593	424	418.6	113.352
Sort 100k rows	ms	507	1,001.6	638.6	781.9	181.5
Select 100k rows	ms	174.3	198.2	187.7	186.78	7.834
Deselect 100k rows	ms	134.8	339	185	202.5	73.515

Generated by 🚫 dangerJS against 46102f2

github-actions · 2022-03-18T21:09:59Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-03-29T08:43:01Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

m4theushw · 2022-04-06T21:58:56Z

docs/data/data-grid/editing/editing.md

+```tsx
+// Changes the mode of field=name from row with id=1 to "edit"
+<DataGrid
+  cellModesModel={{ 1: { name: { mode: GridCellModes.Edit } } }}


It doesn't look good because of PrismJS/prism#1548

Agree, I found the same Prisma issue.

flaviendelangle

What use case are we trying to cover with this control mode ?
I understand the technical part but I struggle to understand why people might need it.

m4theushw · 2022-04-07T12:12:34Z

@flaviendelangle In the legacy API, there's the editRowsModel prop. Users from the Community version use it to control which cells are in edit mode. Despite its incompatibilities with some column types, for this task, it works. The props added here are to provide the same functionality in the new API: start and stop the edit mode declaratively.

cherniavskii · 2022-04-07T16:07:20Z

Is it supposed to support multiple cells being edited at the same time?
I've noticed something like this:

Screen.Recording.2022-04-07.at.18.06.17.mov

github-actions · 2022-04-09T01:35:32Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-04-11T20:18:00Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/pages/api-docs/data-grid/data-grid.json

docs/data/data-grid/editing/StartEditButtonGrid.tsx

joserodolfofreitas

Is the feature designed to have multiple cells in edit mode?
If yes, perhaps we should have an example for that too.

joserodolfofreitas · 2022-04-13T19:56:50Z

docs/data/data-grid/editing/editing.md

+Each cell and row has two modes: `edit` and `view`.
+You can control the active mode using the props `cellModesModel` and `rowModesModel` (only works if `editMode="row"`).
+
+The `cellModesModel` prop accepts an object where the key corresponds to the row ID containing the cell whose mode will be changed.


I'm wondering if we could exchange this whole paragraph, and simplify the description of the expected object by displaying the expected interface or a sample code.

Suggested change

The `cellModesModel` prop accepts an object where the key corresponds to the row ID containing the cell whose mode will be changed.

The `cellModesModel` prop accepts an object as the following:

```tsx

{

rowId: { fieldName: { mode: GridCellModes.Edit | GridCellModes.View }};

}

```

You can find a practical example below.

We can let the following example complement and confirm the usage of the feature's API.

What do you think?

The problem is that this interface suggested is not TS and the code will not be properly formatted. The correct interface would be

export type GridCellModesModelProps = | ({ mode: GridCellModes.View } & Omit<GridStopCellEditModeParams, 'id' | 'field'>) | ({ mode: GridCellModes.Edit } & Omit<GridStartCellEditModeParams, 'id' | 'field'>); export type GridCellModesModel = Record<GridRowId, Record<string, GridCellModesModelProps>>; export type GridRowModesModelProps = | ({ mode: GridRowModes.View } & Omit<GridStopRowEditModeParams, 'id' | 'field'>) | ({ mode: GridRowModes.Edit } & Omit<GridStartRowEditModeParams, 'id' | 'field'>); export type GridRowModesModel = Record<GridRowId, GridRowModesModelProps>;

but it doesn't make any sense.

Yeah. that interface is not really helpful in explaining it :).

Can we use jsx on this case to display the "template" object?

I think the paragraph describing the object is a bit convoluted. I tried simplifying it, but I don't think it's enough because the object itself is hard to explain while keeping the description accurate.

Suggested change

The `cellModesModel` prop accepts an object where the key corresponds to the row ID containing the cell whose mode will be changed.

The `cellModesModel` prop accepts an object containing the `mode` (and additional options) for a given column field, in a given row, as in the following example.

The options accepted are the same available in apiRef.current.startCellEditMode and apiRef.current.stopCellEditMode.

I applied the suggestion. We can only use JSX on JavaScript code. I think the example with the comments explain well the shape of the object.

m4theushw · 2022-04-15T22:10:15Z

Is the feature designed to have multiple cells in edit mode?

@joserodolfofreitas It's not the main purpose, since editMode="row" can be used for this. But yes, it allows multiple cells in edit mode, in the same way that using the API methods allowed too. The demo in https://deploy-preview-4210--material-ui-x.netlify.app/x/react-data-grid/editing/#controlled-mode shows this.

github-actions · 2022-04-22T14:22:21Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-04-27T09:41:23Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

joserodolfofreitas

It looks good to go 👌 (dx and doc-wise)

I've added links to referenced sections explaining the accepted options.

joserodolfofreitas · 2022-05-02T08:33:15Z

docs/data/data-grid/editing/editing.md

+You can control the active mode using the props `cellModesModel` and `rowModesModel` (only works if `editMode="row"`).
+
+The `cellModesModel` prop accepts an object containing the `mode` (and additional options) for a given column field, in a given row, as in the following example.
+The options accepted are the same available in `apiRef.current.startCellEditMode` and `apiRef.current.stopCellEditMode`.


Suggested change

The options accepted are the same available in `apiRef.current.startCellEditMode` and `apiRef.current.stopCellEditMode`.

The options accepted are the same available in `[apiRef.current.startCellEditMode](#start-editing)` and `[apiRef.current.stopCellEditMode](#stop-editing)`.

joserodolfofreitas · 2022-05-02T08:34:49Z

docs/data/data-grid/editing/editing.md

+```
+
+For row editing, the `rowModesModel` props work in a similar manner.
+The options accepted are the same available in `apiRef.current.startRowEditMode` and `apiRef.current.stopRowEditMode`.


Suggested change

The options accepted are the same available in `apiRef.current.startRowEditMode` and `apiRef.current.stopRowEditMode`.

The options accepted are the same available in `[apiRef.current.startRowEditMode](#start-editing)` and `[apiRef.current.stopRowEditMode](#stop-editing)`.

flaviendelangle added the on hold There is a blocker, we need to wait label Mar 17, 2022

m4theushw mentioned this pull request Mar 17, 2022

[docs] Document the new editing API #4060

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 18, 2022

m4theushw self-assigned this Mar 23, 2022

m4theushw force-pushed the control-cell-mode branch from 147b297 to 0107caf Compare March 29, 2022 01:04

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 29, 2022

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Mar 29, 2022

Init

1e331dd

m4theushw force-pushed the control-cell-mode branch from 9e6016a to 1e331dd Compare April 6, 2022 20:30

m4theushw added 3 commits April 6, 2022 17:35

Update descriptions

5869200

Reduce changes

db5aef1

Update demos

237e68e

m4theushw marked this pull request as ready for review April 6, 2022 20:46

Don't read model from params

acd6db6

m4theushw added feature: Editing Related to the data grid Editing feature and removed on hold There is a blocker, we need to wait labels Apr 6, 2022

m4theushw requested review from flaviendelangle, alexfauquette and joserodolfofreitas April 6, 2022 21:19

m4theushw commented Apr 6, 2022

View reviewed changes

flaviendelangle reviewed Apr 7, 2022

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 9, 2022

Merge branch 'master' into control-cell-mode

990be40

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 11, 2022

cherniavskii reviewed Apr 13, 2022

View reviewed changes

docs/pages/api-docs/data-grid/data-grid.json Outdated Show resolved Hide resolved

cherniavskii reviewed Apr 13, 2022

View reviewed changes

docs/data/data-grid/editing/StartEditButtonGrid.tsx Outdated Show resolved Hide resolved

joserodolfofreitas reviewed Apr 13, 2022

View reviewed changes

m4theushw added 2 commits April 15, 2022 18:36

Merge branch 'master' into control-cell-mode

d09ee8a

Make demo work with keyboard

08e5cf6

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 15, 2022

Remove unused import

12cb6f2

m4theushw requested review from cherniavskii, flaviendelangle and joserodolfofreitas April 15, 2022 23:41

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 22, 2022

m4theushw added 2 commits April 22, 2022 14:39

Merge branch 'master' into control-cell-mode

6e374bc

Make less verbose

1d67af3

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Apr 22, 2022

m4theushw added 2 commits April 29, 2022 12:32

Merge branch 'master' into control-cell-mode

cb866b9

Merge branch 'master' into control-cell-mode

b977182

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 29, 2022

joserodolfofreitas approved these changes May 2, 2022

View reviewed changes

m4theushw added 3 commits May 2, 2022 16:15

Merge branch 'master' into control-cell-mode

7e92714

Add links

5cc49f9

Remove docs from unstable method

46102f2

m4theushw merged commit c4012ca into mui:master May 2, 2022

m4theushw deleted the control-cell-mode branch May 2, 2022 20:15

alexfauquette pushed a commit to alexfauquette/mui-x that referenced this pull request Aug 26, 2022

[DataGrid] Add props to control cell mode (mui#4210)

7028e50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add props to control cell mode #4210

[DataGrid] Add props to control cell mode #4210

m4theushw commented Mar 16, 2022 •

edited by cherniavskii

Loading

mui-bot commented Mar 16, 2022 •

edited

Loading

github-actions bot commented Mar 18, 2022

github-actions bot commented Mar 29, 2022

m4theushw Apr 6, 2022

oliviertassinari Jan 10, 2023 •

edited

Loading

flaviendelangle left a comment

m4theushw commented Apr 7, 2022

cherniavskii commented Apr 7, 2022

github-actions bot commented Apr 9, 2022

github-actions bot commented Apr 11, 2022

joserodolfofreitas left a comment

joserodolfofreitas Apr 13, 2022

m4theushw Apr 15, 2022

joserodolfofreitas Apr 21, 2022 •

edited

Loading

m4theushw Apr 22, 2022

m4theushw commented Apr 15, 2022

github-actions bot commented Apr 22, 2022

github-actions bot commented Apr 27, 2022

joserodolfofreitas left a comment •

edited

Loading

joserodolfofreitas May 2, 2022

joserodolfofreitas May 2, 2022

-The `cellModesModel` prop accepts an object where the key corresponds to the row ID containing the cell whose mode will be changed.
+The `cellModesModel` prop accepts an object as the following:
+```tsx
+{
+  rowId: { fieldName: { mode: GridCellModes.Edit | GridCellModes.View }};
+}
+```
+You can find a practical example below.

	The `cellModesModel` prop accepts an object where the key corresponds to the row ID containing the cell whose mode will be changed.
	The `cellModesModel` prop accepts an object containing the `mode` (and additional options) for a given column field, in a given row, as in the following example.
	The options accepted are the same available in apiRef.current.startCellEditMode and apiRef.current.stopCellEditMode.

[DataGrid] Add props to control cell mode #4210

[DataGrid] Add props to control cell mode #4210

Conversation

m4theushw commented Mar 16, 2022 • edited by cherniavskii Loading

mui-bot commented Mar 16, 2022 • edited Loading

github-actions bot commented Mar 18, 2022

github-actions bot commented Mar 29, 2022

m4theushw Apr 6, 2022

Choose a reason for hiding this comment

oliviertassinari Jan 10, 2023 • edited Loading

Choose a reason for hiding this comment

flaviendelangle left a comment

Choose a reason for hiding this comment

m4theushw commented Apr 7, 2022

cherniavskii commented Apr 7, 2022

github-actions bot commented Apr 9, 2022

github-actions bot commented Apr 11, 2022

joserodolfofreitas left a comment

Choose a reason for hiding this comment

joserodolfofreitas Apr 13, 2022

Choose a reason for hiding this comment

m4theushw Apr 15, 2022

Choose a reason for hiding this comment

joserodolfofreitas Apr 21, 2022 • edited Loading

Choose a reason for hiding this comment

m4theushw Apr 22, 2022

Choose a reason for hiding this comment

m4theushw commented Apr 15, 2022

github-actions bot commented Apr 22, 2022

github-actions bot commented Apr 27, 2022

joserodolfofreitas left a comment • edited Loading

Choose a reason for hiding this comment

joserodolfofreitas May 2, 2022

Choose a reason for hiding this comment

joserodolfofreitas May 2, 2022

Choose a reason for hiding this comment

m4theushw commented Mar 16, 2022 •

edited by cherniavskii

Loading

mui-bot commented Mar 16, 2022 •

edited

Loading

oliviertassinari Jan 10, 2023 •

edited

Loading

joserodolfofreitas Apr 21, 2022 •

edited

Loading

joserodolfofreitas left a comment •

edited

Loading