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.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
ofstyleConditions
is True.The following example shows the results using rowStyle
set to the value:
rowStyle = {"backgroundColor": "grey", "color": "white"}
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.
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.
The following example shows the results using rowClass
set to the value:
rowClass = "bg-light text-primary" # Bootstrap 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.
'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
.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 stylerowClass
: All new classes are applied. Old classes are not removed so be aware that classes will accumulate. If yourowClassRules
.rowClassRules
: Rules that return True will have the class applied the second time. Rules that return False will haveThe 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.