Styling Rows

Row customisation can be achieved using the Grid Properties:

Row Styles

To apply a style to the rows it is possible to use the Grid Properties:

rowStyle (dict) The style properties to apply to all rows. Set to a dictionary where the keys are the style name and
the values are the style value.

With the Dash AG Grid Component, it is possible to use getRowStyle using the keys styleConditions and/or
defaultStyle to provide a set of rules (similar to rowClassRules):

getRowStyle (dict) The styles to apply for each row individually. Dict with the keys:

Same Styles for All Rows

The following example shows the results using rowStyle set to the value:

rowStyle = {"backgroundColor": "grey", "color": "white"}
import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"headerName": "Employee", "field": "employee"},
    {"headerName": "Number Sick Days", "field": "sickDays"},
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Shellie Umland", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-all-rows-style",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            rowStyle={"backgroundColor": "grey", "color": "white"},
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

Conditional Row Styles

In this first example we use the data in the sickDays field to define the style to apply, setting:

getRowStyle = {
    "styleConditions": [
        {
            "condition": "params.data.sickDays > 5 && params.data.sickDays <= 7",
            "style": {"backgroundColor": "sandybrown"},
        },
        {
            "condition": "params.data.sickDays >= 8",
            "style": {"backgroundColor": "lightcoral"}
        },
    ],
    "defaultStyle": {"backgroundColor": "grey", "color": "white"}
}

Note that the Number Sick Days column is editable. Try to modify the values to see how the row style is updated.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"headerName": "Employee", "field": "employee"},
    {
        "headerName": "Number Sick Days (Editable)",
        "field": "sickDays",
        "editable": True,
    },
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Shellie Umland", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

getRowStyle = {
    "styleConditions": [
        {
            "condition": "params.data.sickDays > 5 && params.data.sickDays <= 7",
            "style": {"backgroundColor": "sandybrown"},
        },
        {
            "condition": "params.data.sickDays >= 8",
            "style": {"backgroundColor": "lightcoral"},
        },
    ],
    "defaultStyle": {"backgroundColor": "grey", "color": "white"},
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-conditional-style1",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            getRowStyle=getRowStyle,
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

<br>

This second example shows how to use the row index to highlight alternating rows, setting:

getRowStyle = {
    "styleConditions": [
        {
            "condition": "params.rowIndex % 2 === 0",
            "style": {"backgroundColor": "grey", "color": "white"},
        },
    ]
}

To set a different background color on alternating rows, it is also possible to use the global AG Grid CSS
variable --ag-odd-row-background-color.
See Custom Alpine Theme for an example.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

columnDefs = [
    {"headerName": "Employee", "field": "employee"},
    {"headerName": "Number Sick Days", "field": "sickDays"},
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Shellie Umland", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

getRowStyle = {
    "styleConditions": [
        {
            "condition": "params.rowIndex % 2 === 0",
            "style": {"backgroundColor": "grey", "color": "white"},
        },
    ]
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-conditional-style2",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            getRowStyle=getRowStyle,
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

Row Classes

To apply CSS classes to the rows it is possible to use the Grid Properties:

rowClass (string) String with the CSS classes to apply to all rows

rowClassRules (dict) Rules which can be applied to include certain CSS classes. These rules are provided as a dict
where the keys are class names and the values are expressions that if evaluated to True, the class gets used.

Same Classes for All Rows

The following example shows the results using rowClass set to the value:

rowClass = "bg-light text-primary"  # Bootstrap classes
import dash_ag_grid as dag
from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

columnDefs = [
    {"headerName": "Employee", "field": "employee"},
    {"headerName": "Number Sick Days", "field": "sickDays"},
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Shellie Umland", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-all-rows-class",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            rowClass="bg-light text-primary",
            dashGridOptions={"animateRows": False}

        ),
    ],
)

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

Conditional Row Classes

This first example applies Bootstrap CSS classes depending on the employee field value, setting:

rowClassRules = {
    "text-success fw-bold fs-4": "params.data.employee == 'Elvia Macko'",
    "text-warning fw-bold fs-4": "['Flavia Mccloskey', 'Lilly Boaz'].includes(params.data.employee)",
}
import dash_ag_grid as dag
from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


columnDefs = [
    {"headerName": "Employee", "field": "employee"},
    {"headerName": "Number Sick Days", "field": "sickDays"},
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Flavia Mccloskey", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

rowClassRules = {
    "text-success fw-bold fs-4": "params.data.employee == 'Elvia Macko'",
    "text-warning fw-bold fs-4": "['Flavia Mccloskey', 'Lilly Boaz'].includes(params.data.employee)",
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-conditional-class1",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            rowClassRules=rowClassRules,
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

<br>

This second example applies Bootstrap CSS classes depending on the sickDays field value, setting:

rowClassRules = {"bg-danger": "params.data.sickDays >= 5"}

Note that the Number Sick Days column is editable. Try to modify the values to see how the row style is updated.

import dash_ag_grid as dag
from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


columnDefs = [
    {"headerName": "Employee", "field": "employee"},
    {"headerName": "Number Sick Days", "field": "sickDays", "editable": True},
]

rowData = [
    {"employee": "Josh Finch", "sickDays": 4},
    {"employee": "Flavia Mccloskey", "sickDays": 1},
    {"employee": "Marine Creason", "sickDays": 8},
    {"employee": "Carey Livingstone", "sickDays": 2},
    {"employee": "Brande Giorgi", "sickDays": 5},
    {"employee": "Beatrice Kugler", "sickDays": 3},
    {"employee": "Elvia Macko", "sickDays": 7},
    {"employee": "Santiago Little", "sickDays": 1},
    {"employee": "Mary Clifton", "sickDays": 2},
    {"employee": "Norris Iniguez", "sickDays": 1},
    {"employee": "Flavia Mccloskey", "sickDays": 5},
    {"employee": "Kristi Nawrocki", "sickDays": 2},
    {"employee": "Elliot Malo", "sickDays": 3},
    {"employee": "Paul Switzer", "sickDays": 11},
    {"employee": "Lilly Boaz", "sickDays": 6},
    {"employee": "Frank Kimura", "sickDays": 1},
    {"employee": "Alena Wages", "sickDays": 5},
]

rowClassRules = {"bg-danger": "params.data.sickDays >= 5"}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-rows-conditional-class2",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            rowClassRules=rowClassRules,
            dashGridOptions={"animateRows": False}
        ),
    ],
)

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

Conditional Formatting 'params'

When using conditional formatting to apply styles or classes, the properties available through params that
can be used for the conditions are:

Refresh of Styles

If you refresh a row, or a cell is updated due to editing, the rowStyle, getRowStyle, rowClass and rowClassRules
are all applied again. This has the following effect:

Highlighting Rows and Columns on Hover

The grid can highlight both Rows and Columns as the mouse hovers over them.

Highlighting Rows is on by default. To turn it off, set the Grid Option:

dashGridOptions = {"suppressRowHoverHighlight": True}

Highlighting Columns is off by default. To turn it on, set the Grid Option:

dashGridOptions = {"columnHoverHighlight": True}

Note if you hover over a header group, all columns in the group will be highlighted.

import dash_ag_grid as dag
from dash import Dash, dcc, html, Input, Output, callback
import pandas as pd

app = Dash(__name__)

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

columnDefs = [
    {
        "headerName": "Participant",
        "children": [
            {"field": "athlete"},
            {"field": "age"}
        ],
    },
    {
        "headerName": "Details",
        "children": [
            {"field": "country"},
            {"field": "year"},
            {"field": "date"},
            {"field": "sport"},
        ],
    },
]

app.layout = html.Div(
    [
        dcc.Checklist(
            id='chk-highlighting-rows-cols',
            options={
                'highlight_cols': 'Highlight Columns On Hover',
                'suppress_rows': 'Supress Highlight Rows On Hover',
            },
            value=['highlight_cols']
        ),
        dcc.Markdown(id='md-highlighting-rows-cols'),
        dag.AgGrid(
            id="styling-rows-highlighting-rows-cols",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            dashGridOptions={"columnHoverHighlight": True, "animateRows": False}
        ),
    ]
)


@callback(
    Output("md-highlighting-rows-cols", "children"),
    Output("styling-rows-highlighting-rows-cols", "dashGridOptions"),
    Input("chk-highlighting-rows-cols", "value"),
)
def highlight_rows_cols(values):
    if "highlight_cols" in values and "suppress_rows" in values:
        grid_options = '`dashGridOptions={"columnHoverHighlight": True, "suppressRowHoverHighlight": True}`'
    elif "highlight_cols" in values:
        grid_options = '`dashGridOptions={"columnHoverHighlight": True}`'
    elif "suppress_rows" in values:
        grid_options = '`dashGridOptions={"suppressRowHoverHighlight": True}`'
    else:
        grid_options = '`dashGridOptions=None`'

    return (
        grid_options,
        {"columnHoverHighlight": "highlight_cols" in values, "suppressRowHoverHighlight": "suppress_rows" in values}
    )


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

None