Styling Dash AG Grid with a Bootstrap Theme

Dash Python
1

Dash AG Grid has some nice built-in themes and the grid style is easy to customize. See more info in the the Dash docs.

If you are using Dash Bootstrap Components, the default grid theme ag-theme-alpine works well with light themes, and the ag-theme-alpine-dark theme looks nice with dark themes. However, if you would like the grid to match the Bootstrap fonts and colors, try using the stylesheet from the dash-bootstrap-templates library .

You just need to add the stylesheet to your app and include className="dbc dbc-ag-grid" to the outer container of your app.


dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SKETCHY, dbc_css])

app.layout = dbc.Container(
    [
         ...

    ],
    className="dbc dbc-ag-grid"
   
)

See a live demo at:

Here is an example that includes a theme change component which makes it easy to check out all 26 themes. Note that there is no callback required to change the themes!

pip install dash-bootstrap-templates


import dash
from dash import html
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
from dash_bootstrap_templates import ThemeChangerAIO
import pandas as pd


dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])


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

columnDefs = [
    {"field": "athlete", "checkboxSelection": True, "headerCheckboxSelection": True},
    {"field": "age", "maxWidth": 100},
    {"field": "country"},
    {"field": "year", "maxWidth": 120},
    {"field": "date"},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
]

grid = dag.AgGrid(
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    defaultColDef={"flex": 1, "minWidth": 150, "sortable": True, "resizable": True, "filter": True},
    dashGridOptions={"rowSelection":"multiple"},
)

app.layout = dbc.Container(
    [
        html.H5("Dash AG Grid with Bootstrap theme"),
        ThemeChangerAIO(aio_id="theme"),
        grid,
    ],
    className="dbc dbc-ag-grid",
)

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

ag-grid-dbc-theme

6 Likes