[DataGrid] Header filter design improvements #15991
Conversation
KenanYusuf
added
breaking change
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-15991--material-ui-x.netlify.app/ |
packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
Show resolved
Hide resolved
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
| (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor, | ||
| const headerFilterHeight = Math.max( | ||
| Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor), | ||
| MIN_HEADER_FILTER_HEIGHT, |
There was a problem hiding this comment.
What do we think about adding a minimum height for the header filter row? We need at minimum enough space for the inputs to not be clipped. Would fix #13048
There was a problem hiding this comment.
(there's a broken test related to this, I'll fix if we want to move forward with this approach)
There was a problem hiding this comment.
While that seems fine in general, I'm wondering if we could keep the minimum height closer to the compact density height by reducing the font sizes and spacing a bit. I imagine it would be easier now that we have outlined text field. Current compact density view looks a little bit off, isn't it?
Also, this way the users won't be able to customize the height even by using props.headerFilterHeight if the height is lower than min height which doesn't sound great if I want to override the default header filters and pass a custom element.
github-actions
bot
removed
the
PR: out-of-date
There was a problem hiding this comment.
It'd be great to keep the keyboard navigation working in the menu.
| Current behavior | Updated behavior (this PR) |
|---|---|
master.mp4 |
current.mp4 |
| {isApplied && [ | ||
| <rootProps.slots.baseMenuItem | ||
| key="filter-menu-clear-filter" | ||
| iconStart={<rootProps.slots.columnMenuClearIcon fontSize="small" />} |
There was a problem hiding this comment.
The menu with icons looks nice 👍, however if we could add icon per operator, like = for Equals and so on, and use focus state for currently active operator it'll look more visually appealing IMO.
Closes #15486
https://deploy-preview-15991--material-ui-x.netlify.app/x/react-data-grid/filtering/header-filters/
Changelog
Breaking changes
slotProps={{ headerFilterCell: { showClearIcon: true } }}to restore the clear button in the cell.