Master Detail

Master-detail lets rows expand to show detailed information in a nested grid. Each master row carries its detail rows as a nested list, and an expandable column reveals them.

Three pieces are required:

1. master_detail=True on the grid.
2. A column with "cell_renderer": "agGroupCellRenderer", which renders the expand/collapse arrows.
3. detail_cell_renderer_params describing the detail grid's columns and how to extract the detail rows from the master row.

get_detail_row_data follows AG Grid's asynchronous convention: the grid passes a params object containing the master row's data and a successCallback to invoke with the detail rows. The lambda above calls params.successCallback with the nested counts list of the expanded row.

The detail grid is a full AG Grid instance with its own column_defs, independent from the master grid's columns.

row_data and column_defs are plain serializable data, so they can live in state and change at runtime:

detail_cell_renderer_params is different because it holds a callback (get_detail_row_data). A callable cannot be stored in a state var: Reflex serializes state to the client as JSON, and a Python lambda (or FunctionStringVar) has no JSON representation, so syncing that state raises a serialization error at runtime.

Keep the renderer params as a module-level object and pass it to the grid directly — it is compiled into the app once and does not need to change per request:

Reserve state vars for the serializable pieces (row data, column defs) and leave the callback-bearing renderer params at module level.