Dash AG Grid bug in getRowStyle with infinite scroll

[stephank007]

Dash AG-GRID getRowStyle with infinite scroll does not work.

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

app = Dash(__name__)

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

crimson_palette = ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a'][::-1]
getRowStyle            = {
    "styleConditions": [
        {
            "condition": "params.data['athlete'].includes('Michael')",
            "style": {
                "backgroundColor": crimson_palette[0],
                'color'          : 'whitesmoke'
            },
        },
        {
            "condition": "params.data['athlete'].includes('Ryan')",
            "style": {
                "backgroundColor": crimson_palette[1],
                # 'color': 'whitesmoke'
            },
        },
    ]
}

columnDefs = [
    # this row shows the row index, doesn't use any data from the row
    {
        "headerName": "ID",
        "maxWidth": 100,
        # it is important to have node.id here, so that when the id changes (which happens when the row is loaded)
        # then the cell is refreshed.
        "valueGetter": {"function": "params.node.id"},
    },
    {"field": "athlete", "minWidth": 150},
    {"field": "country", "minWidth": 150},
    {"field": "year"},
    {"field": "sport", "minWidth": 150},
    {"field": "total"},
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "sortable": False,
    "resizable": True,
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="infinite-row-no-sort",
            columnDefs=columnDefs,
            defaultColDef=defaultColDef,
            rowModelType="infinite",
            getRowStyle=getRowStyle,
            dashGridOptions={
                "rowSelection": "multiple",
                "rowBuffer": 0,
                # how big each page in our page cache will be, default is 100
                "cacheBlockSize": 100,
                # How many blocks to keep in the store. Default is no limit, so every requested block is kept.
                # how many extra blank rows to display to the user at the end of the dataset, which sets the vertical
                # scroll and then allows the grid to request viewing more rows of data.
                # Default is 1, meaning show 1 row.
                "cacheOverflowSize": 2,
                # how many server side requests to send at a time. if user is scrolling lots, then the requests are
                # throttled down
                "maxConcurrentDatasourceRequests": 1,
                # how many rows to initially show in the grid. having 1 shows a blank row, so it looks like the grid
                # is loading from the users perspective
                "infiniteInitialRowCount": 1000,
                # how many pages to store in cache. default is undefined, which allows an infinite sized cache, pages
                # are never purged. this should be set for large data to stop your browser from getting full of data
                "maxBlocksInCache": 10,
            },
        ),
    ],
)


@callback(
    Output("infinite-row-no-sort", "getRowsResponse"),
    Input("infinite-row-no-sort", "getRowsRequest"),
)
def infinite_scroll(request):
    if request is None:
        return no_update
    partial = df.iloc[request["startRow"]: request["endRow"]]
    return {"rowData": partial.to_dict("records"), "rowCount": len(df.index)}


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