Hi. I have large data. I want to reproduce the following logic in my layout:
https://dash.plotly.com/dash-ag-grid/infinite-row-model - Example 2: Equal Pagination Page Size and Large Infinite Block Size
But something is going wrong. Please help me figure it out
I have layout =
dmc.MantineProvider(
children=html.Div(
children=[
dmc.Group(
children=[
dropdown,
button,
],
),
dmc.LoadingOverlay(
overlayColor="black",
loaderProps={"variant": "dots"},
zIndex=299,
children=[
dag.AgGrid(
id='infinite-grid',
rowModelType="infinite",
columnDefs=generate_default_col_defs(),
columnSize="autoSize",
defaultColDef=DEFAULT_COL_DEFS,
dashGridOptions=INFINITE_GRID_OPTIONS,
),
],
),
],
),
)
dropdown contains the names of the csv files from which we get df. when you click on the button, depending on the selected file, the grid is loaded.
INFINITE_GRID_OPTIONS = {"rowBuffer": 0, "maxBlocksInCache": 2, "cacheBlockSize": 100, "cacheOverflowSize": 2,
"maxConcurrentDatasourceRequests": 2, "infiniteInitialRowCount": 1, "pagination": True, "paginationPageSize": 100,
"animateRows": False, 'suppressColumnVirtualisation': True, "rowSelection": "single", "enableCellTextSelection": True}
def generate_default_col_defs(columns=EXPECTED_COLUMNS):
columnDefs=[
{'headerName': col, 'field': col, 'suppressSizeToFit': True, 'suppressAutoSize': True, 'minWidth': 220, 'maxWidth': 220, 'width': 220}
if col == 'timestamp'
else {'headerName': col, 'field': col, 'minWidth': 150, 'maxWidth': 150, 'width': 150} for col in columns
]
return columnDefs
def generate_col_defs(columns=EXPECTED_PNL_COLUMNS):
columnDefs=[
{'headerName': col, 'field': col, 'minWidth': 150, 'maxWidth': 150, 'width': 150,
"valueFormatter": {"function": f"{LOCALE_EN_GB}.format('$,.2f')(params.value)"}} if col in CURRENCY_COLUMNS
else {'headerName': col, 'field': col, 'suppressSizeToFit': True, 'suppressAutoSize': True, 'minWidth': 220, 'maxWidth': 220, 'width': 220}
if col == 'timestamp'
else {'headerName': col, 'field': col, 'minWidth': 150, 'maxWidth': 150, 'width': 150} for col in columns
]
return columnDefs
callback:
@callback(
output=[
Output('infinite-grid', "getRowsResponse"),
],
inputs=[
Input('load-button', "n_clicks"),
Input('infinite-grid', "getRowsRequest"),
],
state=[
State(dropdown', "value"),
],
running=[
(Output('load-button', "disabled"), True, False),
# (Output('infinite-grid', "getRowStyle"), {}, GET_ROW_STYLE),
(Output('infinite-grid', "columnDefs"), generate_default_col_defs(), generate_col_defs()),
],
background=True,
prevent_initial_call=True
)
def update_layout(n_clicks, request, value):
df = get_df(value) #get df using polars
if 'load-button' == ctx.triggered_id:
if request is None:
# return dash.no_update
raise PreventUpdate
else:
# if value is not None:
if value:
partial = df.slice(request["startRow"], request["endRow"]).to_pandas()
response = {"rowData": partial.to_dict("records"), "rowCount": len(df),}
return response #GET_ROW_STYLE
# else:
# return dash.no_update #, dash.no_update
else:
# return dash.no_update
raise PreventUpdate
if I go to 2 and subsequent grid pages after loading the grid, I get an empty grid, if I select 2 files, the logic that I want to achieve does not work correctly. Please help me figure out and configure the correct operation of the application. Thanks
and how to remove this download when the page is initially loaded:
screen of loading 2 page 0f grid:
and I wanted to make it work, that is, so that when loading data into the grid, the rows would be colored according to a certain parameter in a certain color. maybe it should work in a different way, but I donât understand how yet:
(Output('infinite-grid', "getRowStyle"), {}, GET_ROW_STYLE),