Auto Row Height

This lesson uses this StackBlitz instead of the repo we've been using previously.

It is possible to set the row height based on the contents of the cells. This is called auto row height.

In the StackBlitz, we have text cells of varying length. It'd be cool if we could set the row height based on the length of that text.

To do this, we first need to be sure that any cells we want to automatically set the row height for have a white-space property set to normal in CSS. I've provided a class for you in style.css that does this:

/* style.css */
.cell-wrap-text {
  white-space: normal;
}

Note: In the real world, you may need to add !important to prevent other styles from taking precedence here.

We can then set up auto row height by then adding two properties to our default column definition. The first is the cellClass attribute, which we can use our cell-wrap-text class with, and the second is the autoHeight property. Here's our updated default column definition:

// App.js
// this.state
defaultColDef: {
  flex: 1,
  sortable: true,
  resizable: true,
  cellClass: 'cell-wrap-text',
  autoHeight: true
},

Notice now that the rows automatically adjust to the length of the longest cell in the row.

There are two important things to note here about auto row height. First, auto height works lazily by the grid creating an off-screen temporary row with all the auto height columns rendered into it. The grid then measures the height of the temporary row. Because DOM interaction is required for each row, this can be an intensive process. For this reason, the grid only calculates the height of the row when it is needed. Rows not yet visible due to vertical scrolling do not have their heights calculated. You'll notice this if you scroll rapidly down the grid.

Second, because auto-height is a DOM intensive operation, give some thought to when and how to use it. Only apply auto-height to columns where it makes sense.

With that, let's move on to row spanning!