Add prop for column grouping header height

[TimonPeng]

Summary 💡

columnGroupings have fewer data normally so that the height can be smaller, but now the height follows the columnHeaderHeight prop. CSS can't override this dynamically calculated prop either.

Adding a new prop columnGroupingHeaderHeight might be possible to set it separately.

Examples 🌈

No response

Motivation 🔦

No response

Search keywords: column grouping header height

[romgrk]

Wdym by "can't override the prop"? Have you tried using !important? It's meant for that use-case.

For the feature request itself, we can keep it open but we'll wait to have more interest before prioritizing.

[TimonPeng]

Wdym by "can't override the prop"? Have you tried using !important? It's meant for that use-case.

For the feature request itself, we can keep it open but we'll wait to have more interest before prioritizing.

It can be made to barely work by setting the CSS, but since there is logic in the DataGrid that calculates the height, it causes some problems and is an unusable way to go about it.

[romgrk]

Makes sense. Let's keep this open until we have more interest. Also feel free to submit a PR, this shouldn't be too hard to implement.

[omgitsfrancis]

Ran into this same issue when trying to override the group column header style. I'd be interested in this feature as well.

[pipje2001]

Same problem here, got it to work for the most part using css. But the filler (MuiDataGrid-filler) calculates the height incorrectly resulting in it being too big.

I set the column group header (first header row) to 3.75rem, and the second to 15rem

Using the columnHeaderHeight prop to set the "average" height of each column header sorta works since this prop only accepts height in px (numbers only) it doesn't work with rem

One thing to note is that using columnHeaderHeight and setting it to the average means that you need to manually specify each column headers height, otherwise it will just take columnHeaderHeight.

It would be nice if the datagrid would dynamically calculate the total headers height.

[burketyler]

+1 for interest in seeing this implemented. It's something that would be quite useful - i think many designers will want a more compact look for the heading groups, otherwise it can appear a little blocky. Unwilling to go down the CSS fix route given it impacts other height calculations.

[rodmaia]

+1

[gepa7]

+1
The height should be content fit in its row.
I use this CSS selector for workaround

.MuiDataGrid-columnHeaders :first-child .MuiDataGrid-columnHeader{
  height: 32px !important;
}

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @TimonPeng! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!