[DataGrid] Add separate density factor for column headers #14022
Conversation
KenanYusuf
changed the title
KenanYusuf
added
component: data grid
|
Deploy preview: https://deploy-preview-14022--material-ui-x.netlify.app/ |
| @@ -4,16 +4,29 @@ import { GridDensity } from '../../../models/gridDensity'; | |||
|
|
|||
| export const COMPACT_DENSITY_FACTOR = 0.7; | |||
| export const COMFORTABLE_DENSITY_FACTOR = 1.3; | |||
| export const COMPACT_DENSITY_FACTOR_HEADER = 0.8; | |||
| export const COMFORTABLE_DENSITY_FACTOR_HEADER = 1.3; | |||
There was a problem hiding this comment.
We may want to lower this at some point, as comfortable column headers are quite tall, especially in column groups.
| const headerFilterHeight = Math.floor( | ||
| (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor, | ||
| (props.headerFilterHeight ?? props.columnHeaderHeight) * headerDensityFactor, |
There was a problem hiding this comment.
We have a separate issue to deal with the fact that compact header filters are overflowing; this change neither fixes or worsens this issue #13048
@romgrk I don't think reducing the font-size is the right solution here as it would lower the importance of the labels. We need to ensure that the header rows have enough space to accommodate all of the elements that can be rendered in it - another option is just setting a minimum height for the header row... |
|
How about vertically centered header's content instead of aligning on the title's baseline?
I also don't like it, it would still be a separate header height. @mui/xgrid Any other opinions on this issue? I don't like separate height but I'll go with the consensus if the rest of the team is fine with it. |
We have discussed this option in the Figma explorations - I don't love the misalignment but it would look better if we had persistent separators between the column headers like your example shows. |
|
I'd be happy with persistent separators, I find our current ones a bit jarring. |
Adds a separate density factor for column headers. This allows us to control the size of columns headers independently from rows.
The
compactdensity for column headers with this change is0.8rather than the0.7it was before. This means that column headers appear slightly taller now with the compact density set, buying us more space for other UI elements in the column headers like the aggregation label.Fixes #5274
Before
After