[DataGridPro] Improve compact density UI for header filters#14373
[DataGridPro] Improve compact density UI for header filters#14373MBilalShafi wants to merge 4 commits intomui:masterfrom
Conversation
|
Deploy preview: https://deploy-preview-14373--material-ui-x.netlify.app/ |
|
@MBilalShafi definitely an improvement over the current design, however, I worry that we're impacting usability by removing the label as there is no other way to tell which operator is selected without removing the value or opening the operator menu. What do you think of modifying the control styles slightly so that they take up the whole column header cell? We could drop the font-size to
Let me know what you think. |
|
@kenanyusuf Thank you for creating the mockup. So much crammed-up space previously didn't seem nice to me which is why I was inclined to remove the |
b3b429e to
7048c47
Compare
|
Thanks @arminmeh for pointing it out. We are having an active discussion around updating the header filters UI (around the text underline) and UX (around keyboard navigation), due to which the current PR is kind-of stale, I'll mark it as a Draft until then. Feel free to check or jump into the conversation. |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
|
Closing for now in favor of #15991, will reopen the PR around the figma discussion if needed. |



Fixes #13048
The current UI of the inputs being used in filter input components doesn't leave much room for the
labelto be shown on the top, this PR hides the top label whendensity="compact"Before Preview: https://stackblitz.com/edit/react-jre9au?file=Demo.tsx
After Preview: https://codesandbox.io/p/sandbox/vibrant-neumann-wnvjpx