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.

Column Definition cellClassRules

ag-Grid allows rules to be applied to include certain classes. If you use AngularJS, then this is similar to ng-class, where you specify classes as Javascript object keys, and rules as object values.

Rules are provided as a Javascript class. 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.

This is best explained using the example below. The Year column has the following cellClassRules:

cellClassRules: {
    'rag-green-outer': function(params) { return params.value === 2008},
    'rag-amber-outer': function(params) { return params.value === 2004},
    '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.

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