Cell customisation is done a the column level via the column definition. You can mix and match any of the following mechanisms:
- Cell Style: Providing a CSS style for the cells.
- Cell Class: Providing a CSS class for the cells.
- Cell Class Rules: Providing rules for applying CSS classes.
Each of these approaches are presented in the following sections.
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.
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 Class Rules
You can define rules which can be applied to include certain CSS classes via via
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:
Cell Style, Cell Class & Cell Class Rules Params
All cellClass cellStyle and cellClassRules functions take a params object that implements the following interface:
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:
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. 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 tha 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.
Example Cell Styling
Below shows both cssClassRules snippets above in a full working example. The example 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.