Styling Selections

You can customize the appearance of selected rows and cells. When row selection is enabled, use selectedRowBackgroundColor to set the color of selected rows.

dashGridOptions={
    "theme": {
        "function": "themeQuartz.withParams({ selectedRowBackgroundColor: 'rgba(0, 255, 0, 0.1)' })"
    }
}

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

app = Dash()

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

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
    {"make": "BMW", "model": "M50", "price": 60000},
    {"make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-selections",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={
                "rowSelection": {"mode": "multiRow"},
                "theme": {
                    "function": "themeQuartz.withParams({ selectedRowBackgroundColor: 'rgba(0, 255, 0, 0.1)' })"
                },
            },
        ),
    ],
)

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

Using Legacy Theming

For the previous example, when using legacy theming, use the --ag-selected-row-background-color CSS variable. See Customising Selections in the AG Grid docs for additional details.