Get row height from apiRef

[ithrforu]

Order ID 💳

58079

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

I need access to row height from apiRef and i found unstable_getRowHeight(rowId) but i dont want to use unstable function. Is there any other way i can access to row height by rowId?

Extra context: https://codesandbox.io/s/happy-chihiro-j1wg5v. I try to do a custom row expander (HeightExpander component) and i need "one-line" row height for multiline mode (when isMultiline is true expandLess button should be displayed if the cell content height is more than one line height).

Your environment 🌎

`npx @mui/envinfo`

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

[m4theushw]

You can put a ref into the root element and use ref.clientHeight to get its height. Using unstable_getRowHeight(rowId) will be even worse because it only returns a value after your component has rendered.

[ithrforu]

ref.clientHeight returns larger height then height of one line in "multiline" (expanded) mode. I need height from rowHeight/getRowHeight data grid prop or height of current density mode (if rowHeight not setted).

[ithrforu]

I found the way without isExpandLessNeeded and unstable_getRowHeight(rowId):

    // Show button if element is overflown.
    // Else if it is a "multiline" mode return previous state (state witch was in "oneline" mode).
    setIsButtonVisible((prev) => isOverflown(mainStack) || (isMultilineRow && prev));

https://codesandbox.io/s/happy-chihiro-j1wg5v

It is another way for #417 :)

[ithrforu]

One more stateful way for virtualization : https://codesandbox.io/s/mui-data-grid-row-expander-bw0r6g?file=/index.tsx