Row Spanning

This lesson uses this StackBlitz.

By default, each cell will take up the height of one row. You can change this behaviour to allow cells to span multiple rows. This is called row spanning in ag-Grid and it's similar to cell merging in Excel.

To allow row spanning, the grid must have a property called suppressRowTransform. We can set this up in our state first:

// App.js
// this.state
suppressRowTransform: true

And then add the corresponding prop to the AgGridReact component:

// App.js
// AgGridReact component
suppressRowTransform={this.state.suppressRowTransform}

The property suppressRowTransform is used to have the grid position rows using CSS top offsets instead of CSS transforms. Note that this is not as performant, so use it wisely.

Row spanning is then configured at the column definition level. To have a cell span more than one row, return how many rows to span in the a rowSpan callback:

// App.js
// column definitions array
{
  field: 'athlete',
   width: 200,
   rowSpan: function(params) {
     var athlete = params.data.athlete;
     if (athlete === 'Aleksey Nemov'){
        return 2;
     } else if (athlete === 'Ryan Lochte') {
        return 4;
     } else {
        return 1;
     }
   },
},

We then need to add a CSS class to any cells that are spanning more than one cell. I've provided one for you in style.css:

/* style.css */
.cell-span {
  background-color: #00e5ff;
}

Finally, we need to add that cell class to each of those cells by defining a cell class rule in our column definition. The final column definition for the athlete column will look like this:

// App.js
// column definitions array
{
  field: 'athlete',
   width: 200,
   rowSpan: function(params) {
     var athlete = params.data.athlete;
     if (athlete === 'Aleksey Nemov'){
        return 2;
     } else if (athlete === 'Ryan Lochte') {
        return 4;
     } else {
        return 1;
     }
   },
  cellClassRules: {
    'cell-span': "value==='Aleksey Nemov' || value==='Ryan Lochte'",
  },
}

Notice that any cells with the value "Aleksey Nemov" or "Ryan Lochte" span multiple cells and have the background color we set.

Awesome! Let's learn about one last way to style rows using something called full width components.