Styling Rows

Row customisation can be achieved using the Grid Properties:

• rowStyle To provide a set of CSS styles applied to all rows.
• getRowStyle To provide different sets using rules.
• rowClass To provide a set of CSS classes applied to all rows.
• rowClassRules To provide different sets of CSS classes using rules.

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:

• styleConditions (list of dicts). Each dict has keys:
  • condition (string) JavaScript function that when True the value of the style key will be applied.
  • style (dict). The style properties to apply when the function of condition return True.
• defaultStyle (dict) The style properties to apply to the rows which any of the condition of
  the styleConditions is True.

Same Styles for All Rows

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

rowStyle = {"backgroundColor": "grey", "color": "white"}

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.

<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.

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

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)",
}

<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.

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:

• data The data associated with this row from rowData. Note: data is undefined for row groups.
• node The RowNode associated with this row.
• rowIndex The index of the row.
• api The grid API.
• columnApi The column API.
• context Application context as set on gridOptions.context.

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:

• rowStyle and getRowStyle: All new styles are applied. If a new style is the same as an old style, the new style
  overwrites the old style.
• rowClass: All new classes are applied. Old classes are not removed so be aware that classes will accumulate. If you
  want to remove old classes, then use rowClassRules.
• rowClassRules: Rules that return True will have the class applied the second time. Rules that return False will have
  the class removed second time.

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.