JavaScript Data GridCell Styles

Cells can be styled based on the column that they belong to or the data that they contain.

You can mix and match any of the following mechanisms:

  • Cell Style: Set CSS properties on a cell to directly change its appearance.
  • Cell Class: Attach a CSS class to a cell so that it can be styled by your application's style sheets.
  • Cell Class Rules: Provide rules for applying CSS classes.

Each of these approaches are presented in the following sections.

If you want to change the default appearance of all cells in order to customise the grid to match your application's design, check out the Theming documentation.

Cell Style

Used to provide CSS styles directly (not using a class) to the cell. Can be either an object of CSS styles, or a function returning an object of CSS styles.

cellStyle
CellStyle | CellStyleFunc
An object of css values / or function returning an object of css values for a particular cell.
const gridOptions = {
    columnDefs: [
        // same style for each row
        {
            headerName: 'Static Styles',
            field: 'static',
            cellStyle: {color: 'red', 'background-color': 'green'}
        },
        // different styles for each row
        {
            headerName: 'Dynamic Styles',
            field: 'dynamic',
            cellStyle: params => {
                if (params.value === 'Police') {
                    //mark police cells as red
                    return {color: 'red', backgroundColor: 'green'};
                }
                return null;
            }
        },
    ],

    // other grid options ...
}

Cell Class

Provides a class for the cells in this column. Can be a string (a class), array of strings (array of classes), or a function (that returns a string or an array of strings).

cellClass
string | string[] | CellClassFunc
Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings.
const gridOptions = {
    columnDefs: [
        // return same class for each row
        {
            headerName: 'Static Class',
            field: 'static',
            cellClass: 'my-class'
        },
        // return same array of classes for each row
        {
            headerName: 'Static Array of Classes',
            field: 'staticArray',
            cellClass: ['my-class1','my-class2'],
        },
        // return class based on function
        {
            headerName: 'Function Returns String',
            field: 'function',
            cellClass: params => {
                return params.value === 'something' ? 'my-class-1' : 'my-class-2';
            },
        },
        // return array of classes based on function
        {
            name: 'Function Returns Array',
            field: 'functionArray',
            cellClass: params => ['my-class-1','my-class-2'],
        }
    ],

    // other grid options ...
}

Cell Class Rules

You can define rules which can be applied to include certain CSS classes via colDef.cellClassRules. These rules are provided as a JavaScript map where the keys are the class names and the values are expressions that if evaluated to true, the class gets used. The expression can either be a JavaScript function, or a string which is treated as a shorthand for a function by the grid.

cellClassRules
CellClassRules
Rules which can be applied to include certain CSS classes.

The following snippet is cellClassRules using functions on a year column:

columnDefs: [
    {
        field: 'year',
        cellClassRules: {
            // apply green to 2008
            'rag-green-outer': params => params.value === 2008,
            // apply blue to 2004
            'rag-blue-outer': params => params.value === 2004,
            // apply red to 2000
            'rag-red-outer': params => params.value === 2000,
        }
    }
],

Cell Styling Properties

All cellClass cellStyle and cellClassRules functions take a CellClassParams.

Properties available on the CellClassParams<TData = any, TValue = any> interface.

column
Column for this callback
colDef
The colDef associated with the column for this cell
value
TValue | null | undefined
The value to be rendered
data
TData | undefined
The data associated with this row from rowData. Data is undefined for row groups.
The RowNode associated with this row
rowIndex
number
The index of the row
The grid api.
context
TContext
Application context as set on gridOptions.context.

As an alternative, you can also provide shorthands of the functions using an expression. The column Age in the example uses expressions. An expression is evaluated by the grid by executing the string as if it were a Javascript expression. The expression has the following attributes available to it (mapping the the attributes of the equivalent params object):

  • x: maps value
  • ctx: maps context
  • node: maps node
  • data: maps data
  • colDef: maps colDef
  • rowIndex: maps rowIndex
  • api: maps the grid api

In other words, x and ctx map value and context, all other attributes map the parameters of the same name.

The following snippet is cellClassRules using expressions on an age column:

columnDefs: [
    {
        field: 'age',
        cellClassRules: {
            'rag-green': 'x < 20',
            'rag-blue': 'x >= 20 && x < 25',
            'rag-red': 'x >= 25',
        }
    }
],

Style Refresh

If you refresh a cell, or a cell is updated due to editing, the cellStyle, cellClass and cellClassRules are all 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 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 eg '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
cellStyle: params => params.value > 80 ? { color: 'red' } : null
// safe, to black will override the red when the condition is not true
cellStyle: params => params.value > 80 ? { color: 'red' } : { color: 'black' }

Combined Example

Below shows both cssClassRules snippets above in a full working example. The example demonstrates the following:

  • Age uses cellClassRules with expressions (strings instead of functions). Editing the cell will update the style.
  • Year uses cellClassRules with functions. Editing the cell will update the style.
  • Date and Sport use cellClass, Date sets explicitly, Sport sets using a function. Because a function is used for Sport, it can select class based on data value. Editing Sport will have undetermined results as the class values will accumulate.
  • Gold sets cellStyle implicitly. It is not dependent on the cell value.
  • Silver and Bronze set cellStyle using a function and depends on the value. Editing will update the cellStyle.

First & Last Columns

It's possible to style the cells in the first and last columns using CSS by targeting the .ag-column-first and .ag-column-last selectors as follows:

.ag-cell.ag-column-first {
    background-color: #2244CC44;
}

.ag-cell.ag-column-last {
    background-color: #CC333344;
}