Styling Selections

Control how selected rows and cells appear.

When row selection is enabled, --ag-selected-row-background-color allows to set the color of selected rows. If
your grid uses alternating row colors, we recommend setting this to a semi-transparent color so that the alternating row
colors are visible below it.

.ag-theme-alpine {
    /* bright green, 10% opacity */
    --ag-selected-row-background-color: rgb(0, 255, 0, 0.1);
}

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"field": "make", "checkboxSelection": True, "headerCheckboxSelection": True},
    {"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",
            className="ag-theme-alpine selection",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={"rowSelection": "multiple"},
            defaultColDef={"sortable": True},
        ),
    ],
)

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