Row customisation can be achieved in the following ways:
- Row Style: Providing a CSS style for the rows.
- Row Class: Providing a CSS class for the rows.
- Row Class Rules: Providing rules for applying CSS classes.
Each of these approaches are presented in the following sections.
You can add CSS styles to each row in the following ways:
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.
You can add CSS classes to each row in the following ways:
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.
Row Class Rules
You can define rules which can be applied to include certain CSS classes via
or a string which is treated as a shorthand for a function by the grid.
The following snippet shows
rowClassRules that use functions and the value from the year column:
When a function is provided the params object has the attributes:
data, node, rowIndex, api and
- ctx: maps context
- node: maps node
- data: maps data
- rowIndex: maps rowIndex
- api: maps api
The following snippet shows
gridOptions.rowClassRules applying classes to rows using expressions on an age column value:
Refresh of Styles
If you refresh a row, or a cell is updated due to editing, the rowStyle, rowClass and rowClassRules are all applied again. This has the following effect:
- rowStyle: All new styles are applied. If a new style is the same as an old style, the new style overwrites the old style.
- rowClass: 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 rowClassRules.
- rowClassRules: Rules that return true will have the class applied the second time. Rules tha return false will have the class removed second time.
Example Row Class Rules
The example below demonstrates rowClassRules:
- rowClassRules are used to apply the class 'sick-days-warning' when the number of sick days > 5 and <= 7, and the class 'sick-days-breach' is applied when the number of sick days > 8.
- The grid re-evaluates the rowClassRules when the data is changed. The example
shows changing the data in the three different ways:
api.updateRowData. See Updating Data for details on these update functions.
Highlighting Rows and Columns
ag-column-hover are added
to cells as the mouse is dragged over the cells row or column.
The example below demonstrates the following:
ag-row-hoverhas background color added to it, so when you hover over a cell, the row will be highlighted.
ag-column-hoverhas background color added to it, so when you hover over a cell or a header, the column will be highlighted.
- If you hover over a header group, all columns in the group will be highlighted.