Using ag-Grid with React: Columns

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
  // other props unchanged

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 type="button" onClick={() => this.gridApi.setHeaderHeight(50)}>
   Set Header to 50px

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

Let's learn about tooltips in the next video.


I finished! On to the next chapter