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)