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.

Paritosh · Accepted Answer · 2020-11-04 09:03:49Z

2

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

edited Nov 4, 2020 at 9:03

answered Nov 4, 2020 at 8:40

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ag-grid render multiple rows in a cell

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related