Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Cell Styling

Cell customisation is done a the column level via the column definition. You can mix and match any of the following mechanisms:

  • Cell Class: Providing a CSS class for the cells.
  • Cell Class Rules: Providing rules for applying CSS classes.
  • Cell Style: Providing a CSS style for the cells.
  • Cell Renderer: Take complete control and provide how the cell should look.

This section discusses the first three, setting style via cellClass, cellClasRules and cellStyle attributes of the column definition.

Column Definition cellStyle

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.

// return same style for each row
var colDef = {
    name: 'Static Styles',
    field' 'field1',
    cellStyle: {color: 'red', 'background-color': 'green'}
}
// return different styles for each row
var colDef = {
    name: 'Dynamic Styles',
    field' 'field2',
    cellStyle: function(params) {
        if (params.value=='Police') {
            //mark police cells as red
            return {color: 'red', backgroundColor: 'green'};
        } else {
            return null;
        }
    }
}
    

Column Definition cellClass

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

// return same class for each row
var colDef1 = {
    name: 'Static Class',
    field' 'field1',
    cellClass: 'my-class'
}

// return same array of classes for each row
var colDef2 = {
    name: 'Static Array of Classes',
    field' 'field2',
    cellClass: ['my-class1','my-class2']
}

// return class based on function
var colDef3 = {
    name: 'Function Returns String',
    field' 'field3',
    cellClass: function(params) { return (params.value==='something'?'my-class-1':'my-class-2'); }
}

// return array of classes based on function
var colDef4 = {
    name: 'Function Returns Array',
    field' 'field4',
    cellClass: function(params) { return ['my-class-1','my-class-2']; }
}
        

Cell Style & Cell Class Params

Both cellClass and cellStyle functions take a params object with the following values:

value: The value to be rendered.
data: The row (from the rowData array, where value was taken) been rendered.
colDef: The colDef been rendered.
context: The context as set on the gridOptions.
api: A reference to the ag-Grid API.
$scope: If compiling to Angular, is the row's child scope, otherwise null.

Row Styles

You can provide a style to be applied across the row by using the getRowStye or getRowClass callbacks.

For example, if you wanted to apply a bottom border across each cell you could do something like this:

// with a row style
gridOptions.getRowStyle = function(params) {
    return { borderStyle: 'solid' }
}
// with a row class
gridOptions.getRowClass = function(params) {
    return 'my-class';
}

Column Definition cellClassRules

ag-Grid allows rules to be applied to include certain CSS classes The Rules are provided as a JavaScript map. The keys are 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.

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

cellClassRules: {
    // apply green to 2008
    'rag-green-outer': function(params) { return params.value === 2008},
    // apply amber 2004
    'rag-amber-outer': function(params) { return params.value === 2004},
    // apply red to 2000
    'rag-red-outer': function(params) { return params.value === 2000}
}

When a function is provided the params object has the attributes: value, data, node, colDef, rowIndex, api and 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 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:

cellClassRules: {
    'rag-green': 'x < 20',
    'rag-amber': 'x >= 20 && x < 25',
    'rag-red': 'x >= 25'
}

Below shows both cssClassRules snippets above in a full working example.

Refresh of cellClassRules

If you refresh a cell, or a cell is updated due to editing, the cellClassRules are applied again. If a rules executes a second time and returns true, where previously it returned false, then the CSS class is removed.