Styling Cells

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.

Cell Styles

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

Same Styles for All Cells

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'}
    },
]

Conditional Cells Styles

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:

The Sick Days column is editable and editing the cell will update the style.
The first option applies one set of CSS styles to all the cells (editing will have no effect).
The second option uses a function that return one set of CSS styles with the alpha value of the background color
depending on the sickDays field value.
The third option uses two rules to apply different sets of CSS styles and a default set of CSS styles.

Cell Classes

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.

Same Classes for All Cells

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

Conditional Cells Classes

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:

All the columns are editable, editing the cell will update the classes. The column Border Color uses a dropdown to
edit the cell value.
The column Employee uses one classes string for all the cells (editing will have no effect), setting the
background
color.
The column Sick Days uses a set of rules to apply different classes strings, setting the color, size and position
of the font.
The column Border Color uses a function to apply a classes string depending on the value of the cell.

Conditional Formatting `'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 function
colDef - 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.

Refresh of Styles

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 old
style. If a new style is not present, the old style is left (the grid will NOT remove styles).
cellClass: 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 cellClassRules.
cellClassRules: Rules that return true will have the class applied the second time. Rules that return false will
have the class removed second time.

If 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'}"
        }
    },
]

Refresh Conditional Formatting Depending on Other Columns

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.

Cell Shading Examples

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',
    }
};