[question] autoHeight data grid rows until the max height for the data grid container is set

[tielushko]

Order ID or Support key 💳 (optional)

62502

The problem in depth 🔍

I am trying to achieve the behavior where if there are few grouping or regular rows, the grid applies the autoHeight property and displays the aggregation row right under the last row, without having this gap in the middle.

Instead of this:

Have it be displayed like such:

However, whenever the user expands the rows, I want the grid to be able to stop the autoheight property whenever the rows height has reached the maxHeight of 500px for example.

Is there a good way to achieve such behavior? I tried setting the maxHeight on the parent container of the data grid, but it seems that the grid ignores this CSS property.

Is there a way to find out the dimensions of the data grid itself, compare it with the max dimensions allowed for the height, and dynamically set the autoHeight to be false (that was another idea, not sure if such height selector exists in the DataGrid)

I would greatly appreciate any advice!

Best!

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[m4theushw]

Is there a way to find out the dimensions of the data grid itself, compare it with the max dimensions allowed for the height, and dynamically set the autoHeight to be false (that was another idea, not sure if such height selector exists in the DataGrid)

This would be the only viable way for now. You could listen to the debouncedResize event and check if the new height is greater than the threshold. If it does, then update autoHeight. This event is called with an object containing the width and height.

[tielushko]

I don't believe this would be the optimal solution. here's the sandbox I put together as a trial run of checking the height state of the data grid. You can see the flickering height. I will try to explore the logic a bit more to come up with a solution. If you happen to have an official way of switching between the two states (autoHeight vs fixedHeight please let me know)!

Sandbox Link:

https://codesandbox.io/s/debounced-resize-demo-82tr8b?file=/demo.tsx

[tielushko]

@m4theushw I figured out the new logic for handling the resize event and determining whether we should autoHeight it or not. I am using the number of rows visible on the screen * rowHeight to determine the current space the rows take up. if the pixel space they take up is less that the threshold for the maxHeight we apply autoHeight. If it is larger, we can apply max height.

The only problem i have with this approach is when you hit expand the grouping row, before it has the chance to setAutoHeight to false, the grid renders every single row that is a child of the expanded row. I was wondering if you might have the suggestion for throttling that event to make sure that the autoHeight was initialized to the false value first, only then expanding the row, so that through row virtualization not every single row gets rendered on the page?

I am attaching the changes in the sandbox for anyone's use: https://codesandbox.io/s/debounced-resize-demo-82tr8b?file=/demo.tsx

[tielushko]

I think after playing around with it a bit more, I realized the focus of the resizing should be on when the rowExpansion or rowGroupingModelChange event happens as these are the ones that change the number of visible rows (probably need to include the filtering too then...). But! here's the working solution inside the same sandbox link: https://codesandbox.io/s/debounced-resize-demo-82tr8b?file=/demo.tsx It does not have the issue of rendering all the children rows, and adjust the height of the container accordingly when the events that modify the number of visible rows happen. Let me know what you think @m4theushw and feel free to close the issue.

[oliviertassinari]

Duplicate of #3524