Setting Grid Height and Width

Let's talk about the options you have for setting the grid's height and width.

The AgGridReact component sizes itself based on the style of its parent div. You can set that parent div using styles or classes and using either pixels or percentages as the values. Remember, if you're using a percentage for your height, make sure the container you are putting the grid into also has height specified. The browser will fit the div according to a percentage of the parent's height, and if the parent has no height, then this percentage will always be zero.

We can move the height and width of that parent div into our component state and control it using setState. First, replace the hard-coded style values in that div with this.state.style:

// App.js
<div className="ag-theme-balham" style={this.state.style}>
// AgGridReact component goes here
</div>

Then, create a property in our state called style that is an object with height and width properties. You can set them to whatever you'd like, but here I'll do a height of 450 px and a width of 100%:

// App.js component state
style: {
  height: "450px",
  width: "100%",
},

Now let's make a function that calls setState to set the parent div's height and width dynamically:

resizeGrid = () => {
  this.setState({
    style: {
      height: "400px",
      width: "400px",
    },
  });
};

We also need to make a button to call that resizeGrid function above our AgGridReact component with the rest of our buttons:

<button type="button" onClick={this.resizeGrid}>
  Resize Grid
</button>

Another useful feature for resizing the grid is Auto Height. This means that the grid will auto-size its height to the number of rows displayed inside the grid. This is useful if you have relatively few rows and don't want empty space between the last row and the bottom of the grid.

To use Auto Height, we first need to remove the height from our state:

// App.js component state
style: {
  width: "100%",
},

We also need to add a property to our state called domLayout with a value of autoHeight:

// App.js component state
domLayout='autoHeight'

The autoHeight setting of domLayout means that the grid's height is set to fit the number of rows so no vertical scrollbar is provided by the grid. The grid scrolls horizontally as normal. As usual, we will need to also add a corresponding property to our AgGridReact component:

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

Note that filtering the grid causes the size of the grid to shrink. Pretty cool!

Finally, a warning: don't useAuto Height when displaying large numbers of rows as the grid will render all rows into the DOM. This is different to normal operation where the grid will only render rows that are visible inside the grid's scrollable viewport. For large grids (e.g. >1,000 rows) the draw time of the grid will be slow, or for very large grids, your application can freeze. This is not a problem with the grid, it is a limitation on browsers on how much data they can easily display on one web page. For this reason, if showing large amounts of data, use the grid as normal and the grid's row virtualization will take care of this problem for you. The ag-Grid docs on Auto Height do a great job of further explaining how best to use the feature.