Header Height

In the grid, we have a header that shows the name of each of our columns. By default, this header is 25 px tall. We can change the header height in the grid configuration or programatically through the grid API.

To change the header height through configuration, first add a headerHeight property to state:

// src/App.js
this.state = {
  // rest unchanged
    headerHeight: 60
}

Then, pass it into the grid:

// src/App.js
<AgGridReact
  // other props unchanged
    headerHeight={this.state.headerHeight}
 ></AgGridReact>

If you navigate back to localhost:3000, you can see a taller header.

We can also change the header programatically. Instead of doing this with state and componentDidUpdate, we're just going to create buttons that call the grid API:

<button type="button" onClick={() => this.gridApi.setHeaderHeight(20)}>
   Set Header to 20px
</button>
<button type="button" onClick={() => this.gridApi.setHeaderHeight(50)}>
   Set Header to 50px
</button>

In the video, I also mention that you could call this same function in onGridReady.

Let's learn about tooltips in the next video.