Styling Menus and Popups

Use withParams() to customize the menus, popups, and other floating UI elements of one of the built-in themes. Menus and popups can be customized using parameters like menuBackgroundColor, menuTextColor, menuBorder, popupShadow, cardShadow, and borderRadius:

dag.AgGrid(
    # ...
    dashGridOptions={
        "theme": {
            "function": "themeQuartz.withParams({menuBackgroundColor: 'lightblue', popupShadow: {radius: 20, color: 'gray'}})"
        }
    },
)

Rounding Corners

Use borderRadius to set the radius of most rectangular elements within the grid, including floating elements like cards and popups. This does not affect the grid’s outer wrapper. Use wrapperBorderRadius to set the radius of the grid wrapper specifically:

```python
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash()

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

columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
]

app.layout = html.Div(
    dag.AgGrid(
        id="rounding-corners",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        defaultColDef={"filter": True, "editable": True},
        dashGridOptions={
            "suppressMenuHide": True,
            "theme": {
                "function": """themeQuartz.withParams({
                    borderRadius: 15,
                    wrapperBorderRadius: 20,
                })"""
            },
        },
        columnSize="sizeToFit",
    ),
    style={"margin": 20, "padding": 20, "backgroundColor": "#f0f0f0"}
)

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

Styling Menus Example

This example styles the column menus and popups with rounded corners, drop shadows, and a custom background color. Click on the menu icon in a column header or edit a cell to see the styled popups.

```python
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash()

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

columnDefs = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
    {"field": "year"},
]

app.layout = html.Div(
    dag.AgGrid(
        id="styling-popups",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        defaultColDef={"filter": True, "editable": True},
        dashGridOptions={
            "suppressMenuHide": True,
            "animateRows": False,
            "theme": {
                "function": """themeQuartz.withParams({
                    borderRadius: 10,
                    popupShadow: {radius: 40, spread: 10, color: 'rgb(83, 0, 106)'},
                    cardShadow: {radius: 40, spread: 10, color: 'rgb(83, 0, 106)'},
                    menuBackgroundColor: 'rgb(244, 220, 250)',
                })"""
            },
        },
        columnSize="sizeToFit",
    )
)

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

For more popup styling options, see Theming Popups in the AG Grid docs.