Dash AG Grid - Infinite Row Model - Updating startRow and endRow

Dash Python
14

Here you go, using the api:

from dash import Dash, html, Input, Output, no_update, State, ctx
from dash_ag_grid import AgGrid
import dash_mantine_components as dmc
import pandas as pd


df = pd.read_csv(
        "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
    )
app = Dash()

# basic columns definition with column defaults
columnDefs = [{"field": c} for c in df.columns]

app.layout = html.Div(
    [
        AgGrid(
            id="grid",
            columnDefs=columnDefs,
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            rowModelType="infinite",
            dashGridOptions={
                "pagination": True
            },
        ),
        dmc.ChipGroup(
            [dmc.Chip(x, value=x) for x in ["United States", "Afghanistan"]],
            value="United States",
            id="filters",
        ),
        html.Button(id="fire-filters", children="Fire Filters"),
    ]
)


@app.callback(
    Output("grid", "getRowsResponse"),
    Input("grid", "getRowsRequest"),
    State("filters", "value"),
)
def update_grid(request, filters_data):
    if request:
        filtered_df = df[df['country'] == filters_data]

        partial = filtered_df.iloc[request["startRow"]: request["endRow"]]
        return {"rowData": partial.to_dict("records"), "rowCount": len(filtered_df.index)}

app.clientside_callback(
    """function (n) {
        dash_ag_grid.getApi('grid').purgeInfiniteCache()
        return dash_clientside.no_update
    }""",
    Output("fire-filters", "n_clicks"),
    Input("fire-filters", "n_clicks"),
    prevent_initial_call=True
)


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

More info from here:

1 Like