CODEWITHSUNDEEP
javascriptreactjsag-gridag-grid-react
Ali Torki
Ali Torki

Reputation: 2038

Ag-grid render multiple rows in a cell

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. What we have done by React Table

Does anyone know how can I do this?

I really appreciate your help.

Upvotes: 2

Views: 6532

Answers (1)

Paritosh
Paritosh

Reputation: 11570

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 */ }
];

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

Upvotes: 2

Related Questions