Want the ag grid to auto size when number of rows is small but have a fixed height with a scroll bar when number of rows exceed a threshold

Dash Python
1

I have a dynamic ag grid output which displays on a click event. It can have any number of rows from 1 to 1000. When the number of rows is smaller I want it to autosize so that I don’t see any empty space. But when the height of the grid becomes larger than 400, I want scroll button to appear. I tried putting domLayout=‘autoHeight’ in dashGridOptions and ‘max-height’:400 in style but to no avail. Can anyone help?

2

Hello @ssingh80,

You could try maxHeight with overflow: auto and see what it does.

3

Hi it seems to work. but it is somehow fixing the min height to twice the height I supplied for a row. So when there is 1 row, it leaves space for another row. When the number of rows are greater than or equal to 2, it works perfectly.

4

Have you also adjusted the regular height of the grid?

5

Here is the code for the grid

dag.AgGrid(id = “output-cell-click-data”,
className = “ag-theme-alpine”,
rowData = opl_rows,
columnDefs = opl_columnDefs,
columnSize = “sizeToFit”,
dashGridOptions = {“rowHeight”: 70,‘domLayout’:‘autoHeight’},
style={“maxHeight”: 420,‘overflow’:‘auto’}
)

6

Make sure you also pass a regular height to override the default of the grid.

The rowHeight isn’t taking all the time?

7

adding height parameter fixes the height of the grid. It removes the benefit of all things we did.

8

Set it to None then.