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

Refresh of Styles

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.
  • 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 tha return false will have the class removed second time.

Example Cell Styling

Below shows both cssClassRules snippets above in a full working example. The exmaple 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.

Row Styling

You can add CSS styles and classes to each row. This is done with with the following:

  • rowStyle: Property to set style for all rows. Set to an object of key (style names) and values (style values).
  • getRowStyle: Callback to set style for each row individually.
  • rowClass: Property to set CSS class for all rows. Provide either a string (class name) or array of string (array of class names).
  • getRowClass: Callback to set class for each row individually.

// set background color on every row // this is probably bad, should be using CSS classes gridOptions.rowStyle = {background: 'black'}; // set background color on odd rows // again, this looks bad, should be using CSS classes gridOptions.getRowStyle = function(params) { if (params.node.rowIndex % 2 === 0) { return { background: 'red' } } } // all rows assigned CSS class 'my-green-class' gridOptions.rowClass = 'my-green-class'; // all odd rows assigned 'my-shaded-effect' gridOptions.getRowClass = function(params) { if (params.node.rowIndex % 2 === 0) { return 'my-shaded-effect'; } }