Grid Size

Under normal usage, your application should set the width and height of the grid using CSS styles. The grid will
then fit the width you provide and use scrolling inside the grid to allow all rows and columns to be viewed.

In Dash, the grid has a default size, set with style={"height": 400, "width": "100%"}. Unless you want to change
this, you do not need to include the style prop when you define the grid.

Changing Width and Height

These snippets show different ways to set the size of the grid:

# Set px size
dag.AgGrid(
    style={"height": 600, "width": 400}
)

# set % size
dag.agGrid(
    style={"height": "100%", "width": "100%"}
)

Note on Using Percent Width & Height

When using a percentage value for the height of your grid, ensure that the container element enclosing the grid also
has a specified height. This is important because the browser calculates the grid’s height as a percentage of its
parent’s height. If the parent element does not have a specified height, the percentage value will result in a height
of zero for the grid.

If your grid is not the size you think it should be, then put a border on the grid’s div and see if that’s the size
you want (the grid will fill this div). If it is not the size you want, then you have a CSS layout issue in your
application. If the width and / or height change after the grid is initialized, the grid will automatically resize to
fill the new area.

The following example shows two different Grid Size that can be switched with the buttons.

from dash import Dash, html, Input, Output, ctx, callback
import dash_ag_grid as dag
import pandas as pd

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv"
)

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Button("Default Size", id="grid-size-default-size"),
        html.Button("Change Size", id="grid-size-change-size"),
        dag.AgGrid(
            id="grid-size-callback",
            rowData=df.to_dict("records"),
            columnDefs=[{"field": i} for i in df.columns],
            dashGridOptions={"animateRows": False},
            columnSize="sizeToFit",
        ),
    ]
)


@callback(
    Output("grid-size-callback", "style"),
    Input("grid-size-default-size", "n_clicks"),
    Input("grid-size-change-size", "n_clicks"),
    prevent_initial_call=True,
)
def change_size(*_):
    if ctx.triggered_id == "grid-size-default-size":
        return {"height": 400, "width": "100%"}
    return {"height": 600, "width": 400}


if __name__ == "__main__":
    app.run(debug=True)

DOM Layout

There are three DOM Layout values the grid can have ‘normal’, ‘autoHeight’ and ‘print’. They are used as follows:

Grid Auto Height

Depending on your scenario, you may wish for the grid to auto-size its height to the number of rows displayed inside the
grid. This is useful if you have relatively few rows and don’t want empty space between the last row and the bottom of
the grid.

To allow the grid to auto-size its height to fit rows, set the Grid Option {"domLayout": "autoHeight"}.

Moreover, in order for autoHeight to work correctly with grids taller than the default of 400px, it’s necessary to
remove the default height, or the grid will overflow and can hide other elements on the page.

So the following Grid Parameters have to be set:

dashGridOptions = {"domLayout": "autoHeight"},
style = {"height": None}

The example below demonstrates the autoHeight feature. Note the following when using autoHeight:

from dash import Dash, html, dcc, Input, Output, callback
import dash_ag_grid as dag
import pandas as pd

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv"
)

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                dcc.RadioItems(
                    id='radio-grid-size-autoHeight-rows',
                    options={'0': '0 Rows', '5': '5 Rows', '50': '50 Rows'},
                    value='5'
                ),
                dcc.RadioItems(
                    id='radio-grid-size-autoHeight-domLayout',
                    options=['autoHeight', 'normal'],
                    value='autoHeight'
                ),
                dcc.Checklist(
                    id='chk-grid-size-autoHeight-pinned',
                    options={'pinned-on': 'Pinned Rows'},
                    value=[]
                ),
            ], style={'display': 'flex', 'margin': 10, 'gap': 10}
        ),
        dag.AgGrid(
            id="grid-size-autoHeight",
            columnDefs=[{"field": i} for i in df.columns],
            defaultColDef={'filter': True},
            dashGridOptions={"animateRows": False},
            getRowStyle={
                "styleConditions": [
                    {"condition": "['top', 'bottom'].includes(params.node.rowPinned)",
                     "style": {"backgroundColor": '#ddd', 'color': 'black'}},
                ],
            }
        ),
        html.Div(
            [
                html.Div(
                    "This text is under the grid and should move up and down as the height of the grid changes.",
                    style={'backgroundColor': '#ddd', 'color': '#333', 'textAlign': 'center'}
                ),
                html.P(
                    """
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                    in culpa qui officia deserunt mollit anim id est laborum.
                    """, style={'color': '#777'}
                )
            ], style={'border': '10px solid #ddd', 'padding': '10px', 'marginTop': '20px'}
        )
    ]
)


@callback(
    Output("grid-size-autoHeight", "rowData"),
    Output("grid-size-autoHeight", "dashGridOptions"),
    Output("grid-size-autoHeight", "style"),
    Input("radio-grid-size-autoHeight-rows", "value"),
    Input("radio-grid-size-autoHeight-domLayout", "value"),
    Input("chk-grid-size-autoHeight-pinned", "value"),
)
def update_grid_auto_height(rows, dom_layout, pinned):
    data = df.to_dict("records")
    rowData = data[:int(rows)]
    dashGridOptions = {
        'domLayout': dom_layout,
        'pinnedTopRowData': data[-2:] if pinned else [],
        'pinnedBottomRowData': data[-4:-2] if pinned else [],
    }
    style = None if dom_layout == 'normal' else {"height": None}

    return rowData, dashGridOptions, style


if __name__ == "__main__":
    app.run(debug=True)
This text is under the grid and should move up and down as the height of the grid changes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

When using Auto Height, there is a minimum of 150px set to the grid rows section. This is to avoid an empty grid which
would look weird. To remove this minimum height, add the following CSS:

.ag-center-cols-clipper {
    min-height: unset !important;
}

Don’t use Grid Auto Height when displaying large numbers of rows

If using Grid Auto Height, then the grid will render all rows into the DOM. This is different to normal operation
where the grid will only render rows that are visible inside the grid’s scrollable viewport. For large grids
(like +1,000 rows), the draw time of the grid will be slow, or for very large grids, your application can freeze. This
is not a problem with the grid, but is a limitation on browsers on how much data they can easily display on one web
page. For this reason, if showing large amounts of data, it is not advisable to use Grid Auto Height. Instead, use the
grid as normal and the grid’s row virtualization will take care of this problem for you.