Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DataGrid] Add "does not equal" and "does not contain" filter operators #14489

Merged
merged 3 commits into from
Sep 9, 2024
Merged

[DataGrid] Add "does not equal" and "does not contain" filter operators #14489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7fe4214
[DataGrid] Add "does not equal" and "does not contain" filter operators
KenanYusuf Sep 4, 2024
6605c46
Merge branch 'master' into not-contain-not-equal-filter-operators
KenanYusuf Sep 4, 2024
a1e27b8
increase filter form operator input width
KenanYusuf Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 70 additions & 70 deletions docs/data/data-grid/localization/data.json
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Off-topic, but should we add string labels in place of numeric symbols?
image

= => Equals
!= => Not equals
and so on.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think so.

It would also match what we have in header filters:

Screenshot 2024-09-06 at 11 28 37

I will create a follow up PR 👍

Original file line number Diff line number Diff line change
Expand Up @@ -3,280 +3,280 @@
"languageTag": "ar-SD",
"importName": "arSD",
"localeName": "Arabic (Sudan)",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/arSD.ts"
},
{
"languageTag": "be-BY",
"importName": "beBY",
"localeName": "Belarusian",
"missingKeysCount": 30,
"totalKeysCount": 118,
"missingKeysCount": 34,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/beBY.ts"
},
{
"languageTag": "bg-BG",
"importName": "bgBG",
"localeName": "Bulgarian",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/bgBG.ts"
},
{
"languageTag": "zh-HK",
"importName": "zhHK",
"localeName": "Chinese (Hong Kong)",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhHK.ts"
},
{
"languageTag": "zh-CN",
"importName": "zhCN",
"localeName": "Chinese (Simplified)",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhCN.ts"
},
{
"languageTag": "zh-TW",
"importName": "zhTW",
"localeName": "Chinese (Taiwan)",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhTW.ts"
},
{
"languageTag": "hr-HR",
"importName": "hrHR",
"localeName": "Croatian",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/hrHR.ts"
},
{
"languageTag": "cs-CZ",
"importName": "csCZ",
"localeName": "Czech",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts"
},
{
"languageTag": "da-DK",
"importName": "daDK",
"localeName": "Danish",
"missingKeysCount": 1,
"totalKeysCount": 118,
"missingKeysCount": 5,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts"
},
{
"languageTag": "nl-NL",
"importName": "nlNL",
"localeName": "Dutch",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nlNL.ts"
},
{
"languageTag": "fi-FI",
"importName": "fiFI",
"localeName": "Finnish",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/fiFI.ts"
},
{
"languageTag": "fr-FR",
"importName": "frFR",
"localeName": "French",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/frFR.ts"
},
{
"languageTag": "de-DE",
"importName": "deDE",
"localeName": "German",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts"
},
{
"languageTag": "el-GR",
"importName": "elGR",
"localeName": "Greek",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/elGR.ts"
},
{
"languageTag": "he-IL",
"importName": "heIL",
"localeName": "Hebrew",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/heIL.ts"
},
{
"languageTag": "hu-HU",
"importName": "huHU",
"localeName": "Hungarian",
"missingKeysCount": 6,
"totalKeysCount": 118,
"missingKeysCount": 10,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/huHU.ts"
},
{
"languageTag": "is-IS",
"importName": "isIS",
"localeName": "Icelandic",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/isIS.ts"
},
{
"languageTag": "it-IT",
"importName": "itIT",
"localeName": "Italian",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts"
},
{
"languageTag": "ja-JP",
"importName": "jaJP",
"localeName": "Japanese",
"missingKeysCount": 1,
"totalKeysCount": 118,
"missingKeysCount": 5,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/jaJP.ts"
},
{
"languageTag": "ko-KR",
"importName": "koKR",
"localeName": "Korean",
"missingKeysCount": 31,
"totalKeysCount": 118,
"missingKeysCount": 35,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts"
},
{
"languageTag": "nb-NO",
"importName": "nbNO",
"localeName": "Norwegian (Bokmål)",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nbNO.ts"
},
{
"languageTag": "nn-NO",
"importName": "nnNO",
"localeName": "Norwegian (Nynorsk)",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nnNO.ts"
},
{
"languageTag": "fa-IR",
"importName": "faIR",
"localeName": "Persian",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/faIR.ts"
},
{
"languageTag": "pl-PL",
"importName": "plPL",
"localeName": "Polish",
"missingKeysCount": 31,
"totalKeysCount": 118,
"missingKeysCount": 35,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts"
},
{
"languageTag": "pt-PT",
"importName": "ptPT",
"localeName": "Portuguese",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptPT.ts"
},
{
"languageTag": "pt-BR",
"importName": "ptBR",
"localeName": "Portuguese (Brazil)",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts"
},
{
"languageTag": "ro-RO",
"importName": "roRO",
"localeName": "Romanian",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/roRO.ts"
},
{
"languageTag": "ru-RU",
"importName": "ruRU",
"localeName": "Russian",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ruRU.ts"
},
{
"languageTag": "sk-SK",
"importName": "skSK",
"localeName": "Slovak",
"missingKeysCount": 1,
"totalKeysCount": 118,
"missingKeysCount": 5,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/skSK.ts"
},
{
"languageTag": "es-ES",
"importName": "esES",
"localeName": "Spanish",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/esES.ts"
},
{
"languageTag": "sv-SE",
"importName": "svSE",
"localeName": "Swedish",
"missingKeysCount": 1,
"totalKeysCount": 118,
"missingKeysCount": 5,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/svSE.ts"
},
{
"languageTag": "tr-TR",
"importName": "trTR",
"localeName": "Turkish",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/trTR.ts"
},
{
"languageTag": "uk-UA",
"importName": "ukUA",
"localeName": "Ukrainian",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ukUA.ts"
},
{
"languageTag": "ur-PK",
"importName": "urPK",
"localeName": "Urdu (Pakistan)",
"missingKeysCount": 4,
"totalKeysCount": 118,
"missingKeysCount": 8,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/urPK.ts"
},
{
"languageTag": "vi-VN",
"importName": "viVN",
"localeName": "Vietnamese",
"missingKeysCount": 0,
"totalKeysCount": 118,
"missingKeysCount": 4,
"totalKeysCount": 122,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts"
}
]
30 changes: 30 additions & 0 deletions packages/x-data-grid/src/colDef/gridStringOperators.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we increase the width of the operator dropdown? There's no way for the users to resize it so the UX could be a little bit disturbing with the new operators.
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made that change a1e27b8

This is likely an issue for some translated operator labels too, but not sure of the best way to account for those right now.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is likely an issue for some translated operator labels too, but not sure of the best way to account for those right now.

Agreed, I think we should be mindful of this when finalizing the new filter panel design.

Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,21 @@ export const getGridStringOperators = (
},
InputComponent: GridFilterInputValue,
},
{
value: 'doesNotContain',
getApplyFilterFn: (filterItem: GridFilterItem) => {
if (!filterItem.value) {
return null;
}
const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();

const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
return (value): boolean => {
return value != null ? !filterRegex.test(String(value)) : true;
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great to extract a function that will handle both contains and doesNotContain operators since the only difference is the opposite return value.
Same for the other two negated operators.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense - will create a follow up PR for this improvement 👍

},
InputComponent: GridFilterInputValue,
},
{
value: 'equals',
getApplyFilterFn: (filterItem: GridFilterItem) => {
Expand All @@ -53,6 +68,21 @@ export const getGridStringOperators = (
},
InputComponent: GridFilterInputValue,
},
{
value: 'doesNotEqual',
getApplyFilterFn: (filterItem: GridFilterItem) => {
if (!filterItem.value) {
return null;
}
const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();

const collator = new Intl.Collator(undefined, { sensitivity: 'base', usage: 'search' });
return (value): boolean => {
return value != null ? collator.compare(filterItemValue, value.toString()) !== 0 : true;
};
},
InputComponent: GridFilterInputValue,
},
{
value: 'startsWith',
getApplyFilterFn: (filterItem: GridFilterItem) => {
Expand Down
Loading