How to use Aggrid autoheight with Scrollbar

[nicobockko]

Hello! Teachers!!
How are you!

I’d like to make aggrid like this when row is None or less, height is adjusted

when row is many , height is adjusted

so far I can just use ‘autoHeight’ grid Option

but when row is so many , I want to use scroll bar
so I did like this . I used a parent div

but the problem is when table width expanding
x-scrollbar is located at the bottom of the table..

i want x-scrollbar put at the bottom of parent div like this!!

import pandas as pd
import dash_ag_grid as dag
from dash import html, Dash

df = pd.DataFrame(
    {'ppp': list('aabbccaabbccaabbcc'),
     'aaa': list('AAAAAABBBBBBCCCCCC'),
     'nnn': ['efg'] * 18,
     }
)

def grid():
    return dag.AgGrid(
        columnDefs=[{"field": i} for i in df.columns],
        rowData=df.to_dict('records'),
        columnSize="sizeToFit",
        dashGridOptions={
            "domLayout": "autoHeight",
        }
    )


app = Dash()
app.layout = html.Div(
    grid(),
    style={
        'width': '300px',
        'maxHeight': '300px',
        'overflow': 'auto'
    }
)
if __name__ == "__main__":
    app.run(debug=True)

PLEASE I need your IDEA!

[AnnMarieW]

Check out the docs on grid size here: Grid Size | Dash for Python Documentation | Plotly

If the grid has more rows than you want to show when using using “autoHeight” you can change to “normal” in a callback

dashGridOptions = {“domLayout”: “normal”},

Then you don’t need to put the grid inside a div with a scroll container

[nicobockko]

oh. It makes like this

I’d like to make aggrid like this when row is None or less, height is adjusted

[AnnMarieW]

did you try this as noted on the page I linked to?