search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.9k stars 1.18k forks source link

[data grid] AutoHeight combined with scrollable body #13023

Open httpete opened 1 month ago

httpete commented 1 month ago

Summary

Autoheight is great, keeping the footer hugged up near the rows when the page size changes. But if you resize the page / container, you lose the sticky grid header / footer and scrollable body of the grid as if it has an explicit height.

You really want to be able to do both together. Right now, I use one or the other (autoHeight={true} or an explicit height (most often with a calc() css expression)

There is a holy grail solution to this that can allow the grid to scroll properly in all cases, and keep the autoHeight working in concert.

Examples

No response

Motivation

No response

Search keywords: height autoheight scrolling Order ID: 79357

michelengelen commented 1 month ago

Hey @httpete thanks for raising this issue. I will add this to the board, so the team can have a look!

httpete commented 1 month ago

Here is a visual to help understand it. In this dialog, autoHeight would have kept the footer right under the rows. But in cases where you had enough rows, and autoHeight pushed the footer down, you would not have the areas highlighted in red as fixed /sticky and allow the row container to scroll. Clearly you can have the browser resize the window and the scrolling should work within the Grid.

image