[DataGrid] Add "does not equal" and "does not contain" filter operators #14489
Conversation
KenanYusuf
added
component: data grid
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: ✔️
Deploy preview: https://deploy-preview-14489--material-ui-x.netlify.app/ |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Off-topic, but should we add string labels in place of numeric symbols?
= => Equals
!= => Not equals
and so on.
There was a problem hiding this comment.
Yes, I think so.
It would also match what we have in header filters:
I will create a follow up PR 👍
| const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i'); | ||
| return (value): boolean => { | ||
| return value != null ? !filterRegex.test(String(value)) : true; | ||
| }; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Makes sense - will create a follow up PR for this improvement 👍
Adds "does not equal" and "does not contain" filter operators.
Some UX benchmarking was done to see whether there should be a separate negation modifier for the "does not" filters. In this case, it made sense to follow the filtering experience of similar tools and list the "does not" filters in the same field. See Figma.
Fixes #13300