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.
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).
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
The following snippet is cellClassRules using functions on a year column:
When a function is provided the params object has the attributes: value, data, node, colDef, rowIndex, api and context.
- x: maps value
- ctx: maps context
- node: maps node
- data: maps data
- colDef: maps colDef
- rowIndex: maps rowIndex
- api: maps api
The following snippet is cellClassRules using expressions on an age column:
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
cellClassRuleswith expressions (strings instead of functions). Editing the cell will update the style.
- Year uses
cellClassRuleswith 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
cellStyleimplicitly. It is not dependent on the cell value.
- Silver and Bronze set
cellStyleusing a function and depends on the value. Editing will update the cellStyle.
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.