Cell customization is done at the column level via columnDefs
or defaultColDef
, using the properties:
cellStyle
To provide a set of CSS Styles or different sets using a function or rules.cellClass
: To provide a set of CSS Classes or different sets using a function.cellClassRules
: To provide different sets of CSS Classes using rules.Some cell styles may also be overridden with CSS variables. See the
full CSS variables reference.
To apply CSS Styles to the cells in a column, it is possible to use the Column Property:
cellStyle
(dict | function) The style properties to apply to the cells. Set to a dictionary or a function returning a
dictionary, where the keys are the style name and the values are the style value.
With the Dash AG Grid Component, it is also possible to use cellStyle
using the special keys styleConditions
and/or defaultStyle
to provide a set of rules (similar to cellClassRules
):
cellStyle
(dict) The styles to apply for each cell 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 cells which any of the condition
of the styleConditions
By providing a dictionary with the CSS styles, it will be applied to all the cells in the column. For example:
columnDefs = [
{
'field': 'sickDays',
'cellStyle': {'background-color': '#66c2a5'}
},
]
To apply CSS styles to cells based on conditions or values, it is possible to provide to cellStyle
, either a function:
columnDefs = [
{
'field': 'sickDays',
'cellStyle': {
"function": "params.value && {'backgroundColor': 'rgb(255,0,0,' + params.value/8 + ')'}"
}
},
]
Or a set of rules:
columnDefs = [
{
'field': 'sickDays',
'cellStyle': {
# Set of rules
"styleConditions": [
{
"condition": "[5,6,7].includes(params.value)",
"style": {"backgroundColor": "sandybrown"},
},
{
"condition": "params.value >= 8",
"style": {"backgroundColor": "lightcoral"},
},
],
# Default style if no rules apply
"defaultStyle": {"backgroundColor": "mediumaquamarine"},
}
},
]
The following example shows the result using cellStyle
with different options.
Note that:
To apply CSS Classes to the cells in a column, it is possible to use the Column Properties:
cellClass
(string | function) The classes to apply to the cells. Set to a string or a function returning
a string, containing the classes to apply spaces separated.
cellClassRules
(dict) Rules which can be applied to include certain CSS classes. The keys are the class names and
the values are expressions that if evaluated to true, the classes get used.
By providing a string with the CSS Classes, it will be applied to all the cells in the column. For example:
columnDefs = [
{
"field": "employee",
"cellClass": "bg-secondary bg-gradient bg-opacity-50",
},
]
To apply CSS Classes to cells based on conditions or values, it is possible to provide a function to cellClass
:
columnDefs = [
{
"field": "borderColor",
'cellClass': {"function": "'border border-3 border-' + params.value"},
},
]
Or a set of rules to cellClassRules
:
columnDefs = [
{
"field": "sickDays",
'cellClassRules': {
'text-danger text-end fs-3': '8 <= params.value',
'text-warning text-center fs-4': '5 <= params.value && params.value < 8 ',
'text-success text-start fs-6': 'params.value < 5',
},
},
]
The following example shows the result using cellClass
and cellClassRules
. It uses imported Bootstrap classes.
Note that:
'params'
Note that, when using conditional formatting to apply styles or classes, the properties available through params
that
can be used for the conditions are:
column
- The Column for this functioncolDef
- The colDef
associated with the column for this cell.value
- The value to be rendered.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
- The application context as set on gridOptions.context
.If you refresh a cell, or a cell is updated due to editing, the cellStyle
, cellClass
and cellClassRules
are
applied again. This has the following effect:
cellStyle
: All new styles are applied. If a new style is the same as an old style, the new style overwrites the oldcellClass
: All new classes are applied. Old classes are not removed so be aware that classes will accumulate. If youcellClassRules
.cellClassRules
: Rules that return true will have the class applied the second time. Rules that return false willIf you are using cellStyle
to highlight changing data, then please take note that the grid will not remove styles. For
example if you are setting text color to 'red'
for a condition, then you should explicitly set it back to default, for
example 'black'
when the condition is not met. Otherwise, the highlight will remain once it’s first applied.
# unsafe, the red will stay after initially applied
columnDefs = [
{
'field': 'col1',
'cellStyle': {
"function": "params.value > 5 ? {'color': 'red'} : null"
}
},
]
# safe, the black will override the red when the condition is not true
columnDefs = [
{
'field': 'col1',
'cellStyle': {
"function": "params.value > 5 ? {'color': 'red'} : {'color': 'black'}"
}
},
]
As explained in Refresh of Styles,
the cellStyle
, cellClass
and cellClassRules
are re-applied if a cell is refreshed or edited.
This means if a column uses a conditional formatting depending on other columns and those columns are edited, the former
column’s formatting will not be automatically updated. It has to be refreshed or edited.
To force the column employee
to refresh, it is possible to use the function of the grid
API gridApi.refreshCells({force: true, columns: ['employee']})
. Note that the grid API is available through a
clientside callback.
The following example shows the difference between the default behavior and the behavior when we force the grid to
refresh the Employee column when the Sick Days is edited.
The next two examples are based
on DataTable
examples.
These recipes shade cells with cellStyle
and styleConditions
and creates a legend with HTML components. You’ll need
to pip install colorlover
to get the colorscales.
This third example also shows cells styling to create a heatmap providing a function to the cellStyle
parameter.
View the JavaScript functions used for this example
These JavaScript functions must be added to the dashAgGridFunctions.js
file in the assets folder.
See JavaScript Functions
for more information.
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.heatMap = function (props) {
const {min, max} = props.colDef.cellRendererParams;
const val = props.value;
if (val > 0) {
g = 255;
r = b = 255 * (1 - val / max);
} else {
r = 255;
g = b = 255 * (1 - val / min);
}
return {
backgroundColor: 'rgb(' + [r, g, b].join() + ')',
color: 'black',
}
};