Basic Row Styling

Row styling is a nice way to improve the UI. There are a few different ways to do this.

The first is with the rowStyle property. This is a property to set style for all rows. It's an object with style names as keys and style values as values. For example, we could add a rowStyle property to our state:

// App.js state
rowStyle: {
 background: "red",
 color: "white",
},

And then add our prop to the AgGridReact component:

// App.js AgGridReact component props
rowStyle={this.state.rowStyle}

This doesn't allow us to do any sort of conditional styling, though. For that, we could use a getRowStyle callback to set the style for each row individually based on conditions we define. To do this, we'd create a getRowStyle property in our state:

// App.js state
getRowStyle: (params) => {
  if (params.data.amount < 100) {
    return { background: "darkred", color: "white" };
  }
},

And then add a prop to the AgGridReact component:

// App.js AgGridReact component props
getRowStyle={this.state.getRowStyle}

We can also CSS classes to rows instead of just styles. This follows a similar pattern.

First, there's the rowClass property to set CSS class for all rows. Provide either a string (class name) or array of strings (array of class names). Here's the property in state assigning the ag-red class to all rows:

// App.js state
rowClass: "ag-red",

And here's the prop:

// App.js AgGridReact component props
rowClass={this.state.rowClass}

As with rowStyle, rowClass doesn't give us any control over when that class gets applied. To do this, we can use the getRowClass callback to set a class for each row individually. Here's the callback in state:

// App.js state
getRowClass: (params) => {
  if (params.data.amount < 100) return "ag-red";
},

And here's the prop on the grid component:

// App.js AgGridReact component props
getRowClass={this.state.getRowClass}

Up next, let's learn about a little bit more sophisticated way to style rows using something called "row class rules."