Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Row Styles

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.

Row Style

You can add CSS styles to each row in the following ways:

rowStyle
RowStyle
The style properties to apply to all rows. Set to an object of key (style names) and values (style values)
rowStyle: RowStyle;

interface RowStyle {
  [cssProperty: string]: string | number;
}
getRowStyle
Function
Callback version of property rowStyle to set style for each row individually. Function should return an object of CSS values or undefined for no styles.
getRowStyle = (
    params: RowClassParams<TData>
) => RowStyle | undefined;

interface RowClassParams<TData = any> {
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode associated with this row 
  node: RowNode<TData>;
  // The index of the row 
  rowIndex: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface RowStyle {
  [cssProperty: string]: string | number;
}
<ag-grid-angular
    [rowStyle]="rowStyle"
    [getRowStyle]="getRowStyle"
    /* other grid options ... */>
</ag-grid-angular>

// set background colour on every row, this is probably bad, should be using CSS classes
this.rowStyle = { background: 'black' };

// set background colour on even rows again, this looks bad, should be using CSS classes
this.getRowStyle = params => {
    if (params.node.rowIndex % 2 === 0) {
        return { background: 'red' };
    }
};

Row Class

You can add CSS classes to each row in the following ways:

rowClass
string | string[]
CSS class(es) for all rows. Provide either a string (class name) or array of strings (array of class names).
getRowClass
Function
Callback version of property rowClass to set class(es) for each row individually. Function should return either a string (class name), array of strings (array of class names) or undefined for no class.
getRowClass = (
    params: RowClassParams<TData>
) => string | string[] | undefined;

interface RowClassParams<TData = any> {
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode associated with this row 
  node: RowNode<TData>;
  // The index of the row 
  rowIndex: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
<ag-grid-angular
    [rowClass]="rowClass"
    [getRowClass]="getRowClass"
    /* other grid options ... */>
</ag-grid-angular>

// all rows assigned CSS class 'my-green-class'
this.rowClass = 'my-green-class';

// all even rows assigned 'my-shaded-effect'
this.getRowClass = params => {
    if (params.node.rowIndex % 2 === 0) {
        return 'my-shaded-effect';
    }
};

Row Class Rules

You can define rules which can be applied to include certain CSS classes via the grid option rowClassRules. These rules are provided as a JavaScript map where 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.

rowClassRules
RowClassRules
Rules which can be applied to include certain CSS classes.
rowClassRules: RowClassRules<TData>;

interface RowClassRules<TData = any> {
  [cssClassName: string]: (((params: RowClassParams<TData>) => boolean) | string);
}

interface RowClassParams<TData = any> {
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode associated with this row 
  node: RowNode<TData>;
  // The index of the row 
  rowIndex: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

The following snippet shows rowClassRules that use functions and the value from the year column:

<ag-grid-angular
    [rowClassRules]="rowClassRules"
    /* other grid options ... */>
</ag-grid-angular>

this.rowClassRules = {
    // apply green to 2008
    'rag-green-outer': function(params) { return params.data.year === 2008; },

    // apply amber 2004
    'rag-amber-outer': function(params) { return params.data.year === 2004; },

    // apply red to 2000
    'rag-red-outer': function(params) { return params.data.year === 2000; }
};

All rowStyle, rowClass and rowClassRules functions take a RowClassParams params object.

Properties available on the RowClassParams<TData = any> interface.

data
TData | undefined
The data associated with this row from rowData. Data is undefined for row groups.
node
RowNode
The RowNode associated with this row
rowIndex
number
The index of the row
api
GridApi
The grid api.
columnApi
The column api.
context
any
Application context as set on gridOptions.context.

As an alternative, you can also provide shorthands of the functions using an expression. 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):

  • ctx: maps context
  • node: maps node
  • data: maps data
  • rowIndex: maps rowIndex
  • api: maps the grid api

The following snippet shows rowClassRules applying classes to rows using expressions on an age column value:

<ag-grid-angular
    [rowClassRules]="rowClassRules"
    /* other grid options ... */>
</ag-grid-angular>

this.rowClassRules = {
    'rag-green': 'data.age < 20',
    'rag-amber': 'data.age >= 20 && data.age < 25',
    'rag-red': 'data.age >= 25',
};

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 that 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: rowNode.setDataValue, rowNode.setData and api.applyTransaction. See Updating Data for details on these update functions.

Highlighting Rows and Columns

The grid can highlight both Rows and Columns as the mouse hovers over them.

Highlighting Rows is on by default. To turn it off, set the grid property suppressRowHoverHighlight=true.

Highlighting Columns is off by default. To turn it on, set the grid property columnHoverHighlight=true.

<ag-grid-angular
    [suppressRowHoverHighlight]="suppressRowHoverHighlight"
    [columnHoverHighlight]="columnHoverHighlight"
    /* other grid options ... */>
</ag-grid-angular>

// turns OFF row hover, it's on by default
this.suppressRowHoverHighlight = true;
// turns ON column hover, it's off by default
this.columnHoverHighlight = true;

In this example Rows and Columns are highlighted.

Note if you hover over a header group, all columns in the group will be highlighted.

In this example both Rows and Columns are not highlighted by setting.

Rows highlight by default as this is a common requirement. Column highlighting is less common and as such needs to be opted it.

Row Highlighting works by the grid adding the CSS class ag-row-hover to the row's getting hovered. The grid cannot depend on using CSS :hover selector as this will not highlight the entire row if Columns are pinned.

Column Highlighting works by the grid adding the CSS class ag-column-hover to all Cells to be highlighted.