Merge columns and Rows

[Kevin Silva]

Hi everyone,

I need to merge some columns or rows in some cases using Grid component, I found a way but I want to know if you have the best way to do it.

Here is the example i want to do:

Thanks!

Best Regards

[Vignesh Natarajan]

Hi Kevin,  

 

Thanks for contacting Syncfusion support  

 

Query: “I need to merge some columns or rows in some cases using Grid component” 

 

We suggest you to achieve your requirement using Stacked header feature of Grid. Using this feature, we can render multiple level of columns under one header as per your screenshot. Kindly refer the below online demo for your reference 

 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/stacked-header  

 

Also if you want to merge certain row or cells in Grid, kindly refer our Row / Column spanning feature to achieve this requirement. Refer the below demo and UG documentation for your reference 

 

RowSpanning:  

UG: https://ej2.syncfusion.com/angular/documentation/grid/row/row-spanning/ 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/row-spanning 

 

Column Spanning: 

UG: https://ej2.syncfusion.com/angular/documentation/grid/columns/column-spanning/ 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/column-spanning 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan