Styling Borders

Control the borders around rows, cells and UI elements.

The grid exposes many variables for customising borders. For each kind of border, the style and colour are controlled by
two different variables. For a given kind of border, --ag-borders-{kind} should be set to a CSS border style and
width (for example, solid 1px) or none to disable; and --ag-{kind}-border-color can be set to a CSS border color
(for example, red).

These variables
use Variable Cascading
to allow you to enable/disable all borders quickly or fine tune the borders shown. In the list below, setting a parent
item in the list will set the default value for all children:

Example

.ag-theme-alpine {
    /* disable all borders */
    --ag-borders: none;
    /* then add back a border between rows */
    --ag-row-border-style: dashed;
    --ag-row-border-width: 5px;
    --ag-row-border-color: rgb(150, 150, 200);
}

The above code would apply to every grid with the ag-theme-alpine. In this example, we also add a .borders class so
that it will only apply to this example.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

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-borders",
            className="ag-theme-alpine borders",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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