Full Width Rows

The code for this video is in this this StackBlitz.

A full width component takes up the entire width of the grid. There are two things we need to do use to make a cell take the full width of the row. First, we need to tell ag-Grid how to find the full width cells by implementing a isFullWidthCell(rowNode) callback. Second, we need to provide ag-Grid a component to use as the fullWidthCellRenderer.

The isFullWidthCell(rowNode) callback takes a rowNode as input and should return a boolean true (use fullWidth) or false (do not use fullWidth and render as normal).

Let's first make a helper function first that will check whether the name value matches an array of country names:

// helpers/index.js
export function isFullWidth(data) {
  return ["Peru", "France", "Italy"].indexOf(data.name) >= 0;
}

We'll need to import that function into App.js in order to use it:

import { countryCellRenderer, isFullWidth } from "./helpers";

We're now ready to define the isFullWidth callback in our state:

// App.js
// this.state
isFullWidthCell: function(rowNode) {
  return isFullWidth(rowNode.data);
},

As always, we'll need a corresponding prop in our AgGridReact component:

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

The cell renderer for fullWidth only receives the data parameter, which represents the value for the entire row.

I went ahead and provided the FullWidthCellRenderer, so we can import it into App.js:

// App.js
import FullWidthCellRenderer from "./FullWidthCellRenderer";

We then need to register this cell renderer class in ag-Grid by defining a frameworkComponents object and then tell ag-Grid to use that cell renderer as the full width cell renderer. (Check out the ag-Grid docs on framework components to learn more about this.) We start in state:

// App.js
// this.state
frameworkComponents: {
  fullWidthCellRenderer: FullWidthCellRenderer
},
fullWidthCellRenderer: "fullWidthCellRenderer"

And then add corresponding props to the AgGridReact component:

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

Finally, let's update the row height if the cell is full width.

Add this function to our state:

// App.js
// this.state
getRowHeight: function(params) {
    return isFullWidth(params.data) ? 80 : 25;
  },

And the corresponding prop:

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

Now when you look at the grid in the browser, the full width cells are taller than the normal cells. Notice that sorting still works with these cells!

There are other caveats as to what full width rows are and aren't affected by. For example, you can't use grouping with full width cells. You can check out the docs on full width rows to learn more.

You've reached the end of this section on rows. Up next, we'll be learning all about styling in ag-Grid with React. See you there!