Row Height

By default, the grid will display rows with a height of 25px. You can change this for each row individually to give each row a different height.

First, let's set a row height in our state:

// App.js
// this.state
rowHeight: 40,`

And add a corresponding prop to our AgGridReact component:

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

This will set the row height for all rows to 40px.

We can also set the row height programmatically with callback. We can do this by creating a getRowHeight function in our state:

// App.js
// this.state
getRowHeight: function (params) {
  return params.node.data.amount > 500 ? 50 : 30;
},

The params object passed to the callback has the following values:

• node: The rowNode in question.
• data: The data for the row.
• api: The grid API.
• context: The grid context.

This means we're able to programmatically set the row height based on data inside the row itself. Here we're setting the row height for all rows with amounts greater than $500 to 50px and others to 30px.

Let's also add a corresponding prop to our AgGridReact component so our grid knows to use this function:

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

As always, check out the ag-Grid docs on row height to learn about all of the options you have for setting row height on the grid.