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)