Ag-grid render multiple rows in a cell

Question

I'm new to Ag-grid(React version) and I encountered a problem in rendering multiple rows in a cell with Ag-Grid.

Here is what we've done by React Table but we want to do the same in the Ag-grid React version.

Does anyone know how can I do this?

I really appreciate your help.

Answer 1

Have a look at this documentation: Row Spanning Complex Example

You can use rowSpan property of ColDef while providing values for your ColDef . Provide rowSpan 1 for the two columns (2nd and 3rd visible in the screenshot), conditionally 1 or 2 for the 4th and 2 for the others.

colDef = [
  { field: 'field1', rowSpan: 2, /* other props */ },
  { field: 'field2', rowSpan: 1, /* other props */ },
  { field: 'field3', rowSpan: 1, /* other props */ },
  { field: 'field4', /* other props */, 
    rowSpan: (params) => {
      return  // your condition which decides rowSpan
    }
  },
  { field: 'field5', rowSpan: 2, /* other props */ },
  { field: 'field6', rowSpan: 2, /* other props */ }
];

ag-grid Row spanning also has some limitations. Make sure you check this out as well: Constraints with Row Spanning