7

I have integrated react-data-grid into one of my projects. Over there I want to set the dynamic height of the grid based on the loaded rows. How can I do it?

3 Answers3

2

This worked for me:

const dynamicHeight = Math.min(data.length * 6 + 10, 80) + 'vh'

return(
    <DataGrid style={{height = dynamicHeight}} />
)
  • data.length is the number of rows
  • 6vh is my row size
  • 10vh is the necessary space to show the first row
  • 80vh is my table max size
Marcos Adriano
  • 89
  • 4
1

You can create a wrapper component around react-data-grid where you will calculate dynamic height taking into account whatever parameter you have. In my case, i took into account rowHeight & visibleRowCount. Once, you have calculated dynamic Height, you can pass it to React-data-grid using minHeight prop.

Example:

<ReactDataGrid
minHeight={dynamicHeight}
...
/>

Documentation Link: https://adazzle.github.io/react-data-grid/docs/ReactDataGrid#minheight

mukesh210
  • 2,792
  • 2
  • 19
  • 41
0

You can use the style property and pass it a state variable dynamicHeight like so:

let [dynamicHeight, setDynamicHeight] = useState(*default height*);

When you want to change the height, you can call the function:

setDynamicHeight(*calculate your desired height here*)

return(
    <DataGrid style={{height = dynamicHeight}} />
)

I found this by searching the issues section on GitHub: https://github.com/adazzle/react-data-grid/issues/2553

TerranTEn
  • 41
  • 5