[data grid] Row with dynamic height doesnt shrink when resizing.

[martinhonza]

Order ID 💳 (optional)

54652

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/awesome-sky-5z49qw?file=/demo.tsx

Current behavior 😯

When you resize a column so the maximum height of the content in rows is smaller then row itself the row doesn't shrink in size.

Expected behavior 🤔

Row height can decrease its height based on content and dynamic resizing.

Context 🔦

It seems that for some reason minHeight isnt set to auto for a row even when getRowHeight prop return fnc with "auto". Its visible on the example that I posted, but in our project it started happening when we moved loading of data that is later transformed into dataGrid data from the component that host dataGrid and we are displaying that component conditionally after all the data from API are loaded.
I tried to log whats happening in dataGrid and I found out that the height is set here to fixed value because unstable_getRowInternalSizes https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/components/GridRow.tsx#L387 returns at first only { detail, baseCenter } but then (I assume after recalculation of rowHeights that is mentioned here #5782) it starts returning { detail, baseCenter, baseLeft } which disablesminHeight: "auto"

Your environment 🌎

npx @mui/envinfo

   System:
    OS: macOS 13.1
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.17 - ~/.npm-global/bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Edge: Not Found
    Firefox: 108.0.1
    Safari: 16.2
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.107 
    @mui/core-downloads-tracker:  5.10.15 
    @mui/icons-material: ^5.10.15 => 5.10.15 
    @mui/lab: ^5.0.0-alpha.109 => 5.0.0-alpha.109 
    @mui/material: ^5.10.15 => 5.10.15 
    @mui/private-theming:  5.10.15 
    @mui/styled-engine:  5.10.14 
    @mui/system: ^5.10.15 => 5.10.15 
    @mui/types:  7.2.1 
    @mui/utils: ^5.10.15 => 5.10.15 
    @mui/x-data-grid: ^5.17.16 => 5.17.16 
    @mui/x-data-grid-generator: ^5.17.15 => 5.17.15 
    @mui/x-data-grid-premium:  5.17.15 
    @mui/x-data-grid-pro: ^5.17.16 => 5.17.16 
    @mui/x-date-pickers: ^5.0.8 => 5.0.8 
    @mui/x-license-pro:  5.17.12 
    @types/react: ^18.0.24 => 18.0.24 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components: ^5.3.6 => 5.3.6 
    typescript: ^4.8.4 => 4.8.4 

[m4theushw]

When there're pinned columns, to keep the alignment between non-pinned columns, we set their height to the same height of the center columns. The problem is that once the center columns are resized, the height from the pinned columns is seen as the maximum height. We can solve this bug with the diff below:

diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
index dcb67489b..cc3b0f3f6 100644
--- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
+++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -189,6 +189,7 @@ export const useGridColumnResize = (
 
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
+      apiRef.current.resetRowHeights();
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
       if (colDefRef.current) {
         apiRef.current.publishEvent(

For now you can use the following workaround:

<DataGridPro
  onColumnWidthChange={() => {
    apiRef.current.resetRowHeights();
  }}
/>

Updated CodeSandbox: https://codesandbox.io/s/stoic-star-162csg?file=/demo.tsx

[martinhonza]

@m4theushw Thanks for the quick solution, that helps with the resizing. We have one more problem with density, we are setting density like this because of styling of our cells.

 [`&.${gridClasses['root--densityStandard']} .${gridClasses.cell}`]: {
    [`&::before`]: {
      padding: spacing(2.5, 0),
      content: '""',
    },
  },

If I change from bigger density to smaller the height is not recalculated, is there a way I could do that on density change ? Thanks.

[jrsquared]

I am having a similar issue with pinned columns and dynamic row height. However, I have the data grid inside of an auto-resizing panel, so I am unable to use the onColumnWidthChange callback. I tried to use the onResize callback, and it always ends with the pinned column at minimum height.

https://codesandbox.io/s/mui-x-issue-template-forked-vhbik7?file=/src/App.tsx

[AndresNeisa]

@m4theushw resetRowHeights() has issues when the table pagination is turned on. It doesn't calculate the height correctly, causing a misalignment between the pinned columns and the rest of the table.