React Data GridRow Styles

Row customisation can be achieved in the following ways:

  • Row Style: Providing a CSS style for the rows. Applied individually to each element.
  • Row Class: Providing a CSS class for the rows. Not removed on data refresh.
  • Row Class Rules: Providing rules for applying CSS classes. These styles are dynamic and applied in batches.

We recommend Row Class Rules for most use cases. See Refresh of Styles for more details.

Each of these approaches are presented in the following sections.

Some row styles may also be overridden with CSS variables. See the full variable reference.

Row Style

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

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

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

<AgGridReact
    rowStyle={rowStyle}
    getRowStyle={getRowStyle}
/>

If your data is static, use row classes to apply styles for better performance.

Row Class

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

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

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

<AgGridReact
    rowClass={rowClass}
    getRowClass={getRowClass}
/>

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 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 function, or a string which is treated as a shorthand for a function by the grid.