[DataGrid] Implement multipleSelect column type #11325

martinjlowm · 2023-12-06T21:55:48Z

This adds a data grid column type for selecting multiple items.

This is based on Jim's work at #8099, see that PR for further details.

I have followed (at least) the PR section of the contributing guide.
CLA signed

Closes

SYnc with upstream next

mui-bot · 2023-12-06T22:00:18Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running yarn l10n
Clean files with yarn prettier.

Deploy preview: https://deploy-preview-11325--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against a5811ad

github-actions · 2024-01-10T15:48:58Z

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

github-actions · 2024-01-10T15:48:59Z

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

github-actions · 2024-01-22T13:12:54Z

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

romgrk · 2024-01-22T15:54:03Z

@martinjlowm Sorry about the delay and the merge conflicts, we're in the process of releasing v7 so the breaking changes have been taking priority as we only release a major version once a year. If you can solve the conflicts for the current head commit, I'll review the PR.

martinjlowm · 2024-01-22T23:08:16Z

@romgrk there you go 👍

romgrk · 2024-01-23T19:38:52Z

docs/data/data-grid/filtering/filtering.md

Not sure why this file has this diff, maybe something happened to it on the default branch.

The commit comes from a Pretter run - just took a look at the diff off GitHub and there it looks like there are two additional spaces in the first column prior to this.

Never mind - thought your comment was pinned to the column definition file. It's renamed to index.md now.

romgrk · 2024-01-23T19:42:22Z

packages/grid/x-data-grid/src/colDef/gridMultipleSelectColDef.tsx

+  valueFormatter(params) {
+    const { id, field, value, api } = params;


Will conflict with #11573, need to watch out for this one.

romgrk · 2024-01-23T19:44:42Z

packages/grid/x-data-grid/src/colDef/gridMultipleSelectColDef.tsx

+    if (!isMultipleSelectColDef(colDef)) {
+      return [];
+    }


Is this check necessary if the formatter is for this column?

This formatter returns [] in a few places, isn't it supposed to return a string?

Good question - it's a continuation of Jim's work. I'd agree that streamlining the return type here makes sense.

https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-multiple - we explicitly set multiple on the autocomplete component, but that I would assume would mean that the succeeding string branches should be arrays as well.

But IIUC, valueFormatter is only for formatting to string. One of its use-cases is filtering (full-text search). I'm not sure how else it's used. Maybe someone else can add more context.

https://next.mui.com/x/react-data-grid/column-definition/#value-formatter says:

Note, that the value returned by valueFormatter is only used for rendering purposes. Filtering and sorting are based on the raw value (row[field]) or the value returned by valueGetter.

But this is wrong, the quickfilter code uses the formatted values for its filtering.

packages/grid/x-data-grid/src/colDef/gridMultipleSelectOperators.ts

packages/grid/x-data-grid/src/colDef/gridSelectColDefUtils.tsx

romgrk · 2024-01-23T20:05:08Z

.../grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleMultipleSelect.tsx

Can't wrap my head about the double Multiple in the file name, would you mind explaining what it refers to? Having more than one multiple-select?

I think the idea was that the multipleSelect type was used inside an Autocomplete component with the multiple flag set. So an indication of nesting.

It doesn't look too good and there's a logical error - ~~at least the autocomplete part doesn't assist with finding possible matches, which was what I would expect.~~ Never mind this is actually the single select. Regardless, it'd be nice with an example of the multiple select in there.

…ation of a selection

…ture

github-actions · 2024-01-24T10:14:41Z

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

scottjrainey · 2024-05-22T20:46:55Z

What would I need to do to address this PR being out of date? I'm a Pro customer and this would be very useful for our use case. I would be happy to update the PR.

jimshepherd and others added 23 commits March 1, 2023 20:47

Initial implementation of multiselect column type

d2a1c53

Merge branch 'next' into multipleselect

fcc4660

SYnc with upstream next

Prettier updates

f41f908

Fix type mismatch in excelSerializer

51133dc

Proptypes and api docs update

e30657b

Fix multipleSelect unit tests

8cfb492

Fix lint and l10n errors

375bcda

Merge upstream and update docs and l10n

996e506

Move SelectColDef shared methods to separate file

91d166c

Use BaseSelectOption in MultipleSelect

05ef02e

Merge next

d2b5a0d

Fix eslint, typescript and unit test errors

0e605d0

Run l10n to update locales

07ae49b

Add checks or pauses between consecutive events in tests

c6a6f39

Add space between comma separated values in cell render

7a6b63d

Don't close listbox on value change

c9c485e

Use Autocomplete as component for MultipleSelect

a8b2a67

Improve fit of GridEditMultipleSelectCell in cell

1f2722d

Merge upstream

2488720

Revert change to ColumnTypesGrid doc

d07ecff

Add multiple line display of chips

1580684

Merge upstream

82e64d7

Merge branch 'next' of github.com:mui/mui-x into multipleselect

4bd5fae

Martin Madsen added 2 commits December 6, 2023 23:05

Update l10n

775459e

Run Prettier

6ee87bc

oliviertassinari added CLA: signed See https://www.notion.so/mui-org/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 component: data grid This is the name of the generic UI component, not the React module! labels Dec 6, 2023

Martin Madsen added 2 commits December 7, 2023 19:56

Resolve type errors

752e139

Resolve test cases and base multi select on the single version

915c0f0

Merge branch 'next' of github.com:mui/mui-x into multipleselect

bb3010e

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

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

alexfauquette mentioned this pull request Jan 22, 2024

[code-infra] Fix proptypes generation #11776

Closed

martinjlowm added 2 commits January 22, 2024 23:11

Merge branch 'next' of github.com:mui/mui-x into multipleselect

2c29ad0

Update locales and translations

549457b

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

martinjlowm added 3 commits January 22, 2024 23:32

Extend propTypes

d26a43a

Sort propTypes

97622f1

docs:api

3d5f48d

romgrk reviewed Jan 23, 2024

View reviewed changes

packages/grid/x-data-grid/src/colDef/gridMultipleSelectOperators.ts Outdated Show resolved Hide resolved

romgrk reviewed Jan 23, 2024

View reviewed changes

packages/grid/x-data-grid/src/colDef/gridSelectColDefUtils.tsx Outdated Show resolved Hide resolved

romgrk reviewed Jan 23, 2024

View reviewed changes

romgrk requested a review from cherniavskii January 23, 2024 20:12

martinjlowm added 4 commits January 23, 2024 21:32

Comply with valueFormatter definition of returning a string represent…

069f70f

…ation of a selection

Move multipleSelect filter logic docs to the new filtering file struc…

db4eb15

…ture

Make isArrayOfObjects more defensive

fc59a7f

Resolve filter operator interface change

a5811ad

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

MBilalShafi changed the base branch from next to master March 21, 2024 02:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Implement multipleSelect column type #11325

[DataGrid] Implement multipleSelect column type #11325

martinjlowm commented Dec 6, 2023 •

edited

Loading

mui-bot commented Dec 6, 2023 •

edited

Loading

github-actions bot commented Jan 10, 2024

github-actions bot commented Jan 10, 2024

github-actions bot commented Jan 22, 2024

romgrk commented Jan 22, 2024

martinjlowm commented Jan 22, 2024

romgrk Jan 23, 2024

martinjlowm Jan 23, 2024

martinjlowm Jan 23, 2024 •

edited

Loading

romgrk Jan 23, 2024

romgrk Jan 23, 2024

romgrk Jan 23, 2024

martinjlowm Jan 23, 2024

martinjlowm Jan 23, 2024

romgrk Jan 23, 2024

romgrk Jan 23, 2024

romgrk Jan 23, 2024

martinjlowm Jan 23, 2024

martinjlowm Jan 23, 2024 •

edited

Loading

github-actions bot commented Jan 24, 2024

scottjrainey commented May 22, 2024

		valueFormatter(params) {
		const { id, field, value, api } = params;

[DataGrid] Implement multipleSelect column type #11325

Are you sure you want to change the base?

[DataGrid] Implement multipleSelect column type #11325

Conversation

martinjlowm commented Dec 6, 2023 • edited Loading

mui-bot commented Dec 6, 2023 • edited Loading

Localization writing tips ✍️

github-actions bot commented Jan 10, 2024

github-actions bot commented Jan 10, 2024

github-actions bot commented Jan 22, 2024

romgrk commented Jan 22, 2024

martinjlowm commented Jan 22, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martinjlowm Jan 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martinjlowm Jan 23, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 24, 2024

scottjrainey commented May 22, 2024

martinjlowm commented Dec 6, 2023 •

edited

Loading

mui-bot commented Dec 6, 2023 •

edited

Loading

martinjlowm Jan 23, 2024 •

edited

Loading

martinjlowm Jan 23, 2024 •

edited

Loading