[DataGrid] Add single select column type #1956

DanailH · 2021-06-24T10:21:00Z

Fixes #1320

Had to add a new prop in the ColDef - valueOptions that is used to determine the select options for that column.

Preview: https://deploy-preview-1956--material-ui-x.netlify.app/components/data-grid/#commercial-version

docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js

packages/grid/_modules_/grid/components/cell/GridEditSelectCell.tsx

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

packages/grid/_modules_/grid/models/colDef/gridSelectOperators.ts

m4theushw · 2021-06-24T12:18:19Z

We could add another column to the employee dataset to use this new column type. In commodity, all columns that use a select need a custom one because the options are rendered differently.

Co-authored-by: Matheus Wichman <[email protected]>

DanailH · 2021-06-24T12:57:30Z

We could add another column to the employee dataset to use this new column type. In commodity, all columns that use a select need a custom one because the options are rendered differently.

Yes I was thinking of updating the x-data-grid-generator but I want to push it for another PR to keep that one smaller.

m4theushw · 2021-06-24T13:06:59Z

Yes I was thinking of updating the x-data-grid-generator but I want to push it for another PR to keep that one smaller.

No problem, I suggested it because I had to download the PR to test it.

oliviertassinari

No problem, I suggested it because I had to download the PR to test it.

Same pain here. I think that it signals that the developers can't easily discover the full scope of this feature. How about we replace EditContractType and EditRateType as to simple direct application of the new column type? It might be too basic use cases to stress test the feature, but it would already be a start.

docs/src/pages/components/data-grid/columns/columns.md

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

packages/grid/_modules_/grid/components/cell/GridEditSelectCell.tsx

packages/grid/_modules_/grid/models/colDef/gridSelectOperators.ts

packages/grid/_modules_/grid/models/colDef/gridColType.ts

packages/grid/_modules_/grid/components/cell/GridEditSelectCell.tsx

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

Co-authored-by: Olivier Tassinari <[email protected]>

…hub.com:DanailH/material-ui-x into feature/DataGrid-1320/create-select-column-type

oliviertassinari

It looks like we are almost there. Things that seem left:

Handle valueOptions when is a rich object, e.g. filtering
Simplify Commodity data set with the new built-in type, e.g. EditContractType and EditRateType

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx

dtassone · 2021-06-28T10:18:08Z

packages/grid/data-grid/src/tests/filtering.DataGrid.test.tsx

+ {
+ field: 'country',
+ type: 'select',
+ valueOptions: ['United States', 'Germany', 'France'],


what if you want to render a template in the select? Ie flag and country?
Also I would have expected the grid to just generate the options by getting all the different values of a column without needing to provide those options.

I thought about that but what if there is a value that no column has, then it is a problem of not having a way go get it.

Regarding the template - based on that discussion #1956 (comment) we can start simple and extend it. For custom templates, the column type can be extended. I can have the same argument for the date picker and for any of the other column types.

Co-authored-by: Olivier Tassinari <[email protected]>

oliviertassinari

In the commodity data set, I can't find one column that uses the render cell of the singleSelect type. How about we kill renderEditCell in field: 'rateType'?

Otherwise, it looks good

oliviertassinari · 2021-06-29T11:39:08Z

docs/pages/api-docs/data-grid/grid-col-def.md

+| <span class="prop-name optional">type<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | <span class="prop-default">'string'<br /></span> | Type allows to merge this object with a default definition [GridColDef](/api/data-grid/grid-col-def/). |
+| <span class="prop-name optional">valueFormatter<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(params: GridValueFormatterParams) =&gt; GridCellValue</span> | | Function that allows to apply a formatter before rendering its value. |
+| <span class="prop-name optional">valueGetter<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(params: GridValueGetterParams) =&gt; GridCellValue</span> | | Function that allows to get a specific data instead of field to render in the cell. |
+| <span class="prop-name optional">valueOptions<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string \| []</span> | | To be used in combination with `type: 'singleSelect'`. This is an array of the possible cell values and labels. |


This is outdated.

It is the same as in the gridColDef. Maybe we can say it is This is an array of the possible cell string values and/or labels. ?

The description is already up to date. I was making a reference to the type that is outdated, compared to the implementation:

Hmm seems to be a bug with the docs generation script. Array<string | { value: any; label: string }> is converted to string \| []

This will be fixed by #2003.

packages/grid/x-grid-data-generator/src/commodities.columns.tsx

DanailH · 2021-06-29T13:53:52Z

In the commodity data set, I can't find one column that uses the render cell of the singleSelect type. How about we kill renderEditCell in field: 'rateType'?

Otherwise, it looks good

Done. I trashed a couple of more renderEdit* components. The ones that were not using the Autocomplete are now using the default render cell component.

packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx

m4theushw

There's an e2e test case added to test the support of portaled components, e.g. Select. We could update it to use this new column type. You have to render all columns in the full featured demo to see the columns that use the singleSelect. I saw that you updated the maxColumns in 0f4d127 but it was reverted.

packages/grid/x-grid-data-generator/src/services/static-data.ts

packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx

packages/storybook/src/stories/grid-columns.stories.tsx

DanailH · 2021-06-30T07:14:06Z

There's an e2e test case added to test the support of portaled components, e.g. Select. We could update it to use this new column type. You have to render all columns in the full featured demo to see the columns that use the singleSelect. I saw that you updated the maxColumns in 0f4d127 but it was reverted.

I can enable it back to the full column list, not a problem. Actually even with the current setup of 20 columns, you can see the new col type (for filters for example) but the render cell component is custom. I'll bump it.

m4theushw

Looks good. I think you'll need to merge with master first because I merged #2003.

m4theushw · 2021-07-01T12:05:47Z

Sorry to close it. 😁

…e/DataGrid-1320/create-select-column-type

oliviertassinari · 2021-07-01T13:05:43Z

A nice addition, I was looking at the new GitHub project view WIP: https://twitter.com/github/status/1407731478096756739 and of course, they have a single select. Looks close to Airtable and Notion.

Add select column type

f3fbe67

DanailH added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Jun 24, 2021

DanailH requested review from dtassone, oliviertassinari and m4theushw June 24, 2021 10:21

DanailH self-assigned this Jun 24, 2021

DanailH added 2 commits June 24, 2021 13:30

Update api docs

f72c4f2

docs

2e82f78

m4theushw reviewed Jun 24, 2021

View reviewed changes

DanailH and others added 2 commits June 24, 2021 15:54

Update docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js

8464bd4

Co-authored-by: Matheus Wichman <[email protected]>

Update packages/grid/_modules_/grid/models/colDef/gridColDef.ts

ba8f912

Co-authored-by: Matheus Wichman <[email protected]>

PR comments

f474a25

oliviertassinari reviewed Jun 24, 2021

View reviewed changes

DanailH and others added 5 commits June 25, 2021 12:44

Update docs/src/pages/components/data-grid/columns/columns.md

563026c

Co-authored-by: Olivier Tassinari <[email protected]>

Update packages/grid/_modules_/grid/models/colDef/gridColDef.ts

be3b7b0

Co-authored-by: Olivier Tassinari <[email protected]>

pr comments

c6c60e5

Merge branch 'feature/DataGrid-1320/create-select-column-type' of git…

32d2039

…hub.com:DanailH/material-ui-x into feature/DataGrid-1320/create-select-column-type

format

fe90d86

DanailH requested review from oliviertassinari and m4theushw June 25, 2021 09:49

oliviertassinari changed the title ~~[DataGrid] Add column type='select'~~ [DataGrid] Add single select column type Jun 25, 2021

oliviertassinari reviewed Jun 25, 2021

View reviewed changes

packages/grid/_modules_/grid/models/colDef/gridColDef.ts Outdated Show resolved Hide resolved

m4theushw reviewed Jun 25, 2021

View reviewed changes

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputValue.tsx Outdated Show resolved Hide resolved

oliviertassinari mentioned this pull request Jun 26, 2021

[DataGrid] Custom localeCompare is not fit for usage in filtering of large arrays #1968

Closed

1 task

dtassone reviewed Jun 28, 2021

View reviewed changes

Update packages/grid/_modules_/grid/models/colDef/gridColDef.ts

eb820be

Co-authored-by: Olivier Tassinari <[email protected]>

DanailH added 3 commits June 28, 2021 15:12

revert demo

e7a9855

use new col type in the demo

e03d0f5

Fix keyboard

58113d8

DanailH requested review from dtassone, m4theushw and oliviertassinari June 29, 2021 08:29

close select when escape

114075f

oliviertassinari reviewed Jun 29, 2021

View reviewed changes

Remove dead code

0f4d127

Revert demo

2cc701e

oliviertassinari reviewed Jun 29, 2021

View reviewed changes

packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx Outdated Show resolved Hide resolved

DanailH added 2 commits June 29, 2021 17:35

use value parcer

8ba72d9

Add tests for editing singleSelect col type

2b21278

m4theushw reviewed Jun 29, 2021

View reviewed changes

DanailH added 2 commits June 30, 2021 10:23

extend demo

6ab9c56

resolve comflicts

d95979e

m4theushw mentioned this pull request Jun 30, 2021

[docs] Fix description of union types #2003

Merged

Use api directly

aad5827

DanailH requested a review from m4theushw July 1, 2021 09:51

m4theushw closed this in #2003 Jul 1, 2021

m4theushw approved these changes Jul 1, 2021

View reviewed changes

m4theushw reopened this Jul 1, 2021

DanailH added 2 commits July 1, 2021 15:27

Merge branch 'master' of github.com:mui-org/material-ui-x into featur…

ca76152

…e/DataGrid-1320/create-select-column-type

docs

56d4f49

DanailH merged commit 33b6863 into mui:master Jul 1, 2021

m4theushw mentioned this pull request Apr 11, 2022

[data grid] Add multipleSelect column type #4410

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add single select column type #1956

[DataGrid] Add single select column type #1956

DanailH commented Jun 24, 2021 •

edited by oliviertassinari

Loading

m4theushw commented Jun 24, 2021

DanailH commented Jun 24, 2021

m4theushw commented Jun 24, 2021

oliviertassinari left a comment

oliviertassinari left a comment •

edited

Loading

dtassone Jun 28, 2021

DanailH Jun 28, 2021

oliviertassinari left a comment

oliviertassinari Jun 29, 2021

DanailH Jun 29, 2021

oliviertassinari Jun 29, 2021 •

edited

Loading

DanailH Jun 29, 2021

m4theushw Jun 30, 2021

DanailH commented Jun 29, 2021

m4theushw left a comment

DanailH commented Jun 30, 2021

m4theushw left a comment

m4theushw commented Jul 1, 2021

oliviertassinari commented Jul 1, 2021

[DataGrid] Add single select column type #1956

[DataGrid] Add single select column type #1956

Conversation

DanailH commented Jun 24, 2021 • edited by oliviertassinari Loading

m4theushw commented Jun 24, 2021

DanailH commented Jun 24, 2021

m4theushw commented Jun 24, 2021

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

dtassone Jun 28, 2021

Choose a reason for hiding this comment

DanailH Jun 28, 2021

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Jun 29, 2021

Choose a reason for hiding this comment

DanailH Jun 29, 2021

Choose a reason for hiding this comment

oliviertassinari Jun 29, 2021 • edited Loading

Choose a reason for hiding this comment

DanailH Jun 29, 2021

Choose a reason for hiding this comment

m4theushw Jun 30, 2021

Choose a reason for hiding this comment

DanailH commented Jun 29, 2021

m4theushw left a comment

Choose a reason for hiding this comment

DanailH commented Jun 30, 2021

m4theushw left a comment

Choose a reason for hiding this comment

m4theushw commented Jul 1, 2021

oliviertassinari commented Jul 1, 2021

DanailH commented Jun 24, 2021 •

edited by oliviertassinari

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari Jun 29, 2021 •

edited

Loading