Row Menu | Dash for Python Documentation

The rowMenu is a cell renderer component included with Dash AG Grid. This means that it’s not necessary to include it in the dashAgGridComponentFunctions.js file in the assets folder.

When the user selects an option from the rowMenu, the cellRendererData is updated.

cellRendererData (dict; optional): Special prop to allow feedback from cell renderer to the grid. cellRendererData is a dict with keys:

colId (string; optional): Column ID from where the event was fired.
rowId (boolean | number | string | dict | list; optional): Row Id from the grid, this could be a number automatically, or set via getRowId.
rowIndex (number; optional): Row Index from the grid, this is associated with the row count.
timestamp (boolean | number | string | dict | list; optional): Timestamp of when the event was fired.
value (boolean | number | string | dict | list; optional): value of the menu item selected.

import dash_ag_grid as dag
from dash import Dash, Input, Output, html, dcc, callback

app = Dash(__name__)

columnDefs = [
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
    {"field": "menu", "cellRenderer": "rowMenu"},
]

rowData = [
    {
        "make": "Toyota",
        "model": "Celica",
        "price": 35000,
        "menu": [
            {"label": "Option 1", "value": 1},
            {"label": "Option 2", "value": 2},
            {"label": "Option 3", "value": 3},
        ],
    },
    {
        "make": "Ford",
        "model": "Mondeo",
        "price": 32000,
        "menu": [
            {"label": "Option 4", "value": 4},
            {"label": "Option 5", "value": 5},
            {"label": "Option 6", "value": 6},
        ],
    },
    {
        "make": "Porsche",
        "model": "Boxster",
        "price": 72000,
        "menu": [
            {"label": "Option 7", "value": 7},
            {"label": "Option 8", "value": 8},
            {"label": "Option 9", "value": 9},
        ],
    },
]


grid = dag.AgGrid(
    id="cellrenderer-grid",
    columnSize="sizeToFit",
    getRowId="params.data.make",
    columnDefs=columnDefs,
    rowData=rowData,
)

app.layout = html.Div(
    [
        dcc.Markdown("Example: Row Menu Component"),
        grid,
        html.P(id="cellrenderer-data"),
    ]
)


@callback(
    Output("cellrenderer-data", "children"),
    Input("cellrenderer-grid", "cellRendererData"),
)
def show_click_data(data):
    if data:
        return (
            "You selected option {} from the colId {}, rowIndex {}, rowId {}.".format(
                data["value"],
                data["colId"],
                data["rowIndex"],
                data["rowId"],
            )
        )
    return "No menu item selected."


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