I am looking to combine two ag-grids into a single grid

Question

I have an ag-grid using angular. when I click compare and select an option i need to show the data in this existing grid in the same format as original grid but columns .

Example: i have a row -> (existing grid)header1 header2 header3

after selecting comapre, i should get this grid (updated grid)header1 +header1 header2 +header2 header3 +header3 i need to have columns next to each other in the grid to compare the data.

How do i append columns of the grid alternatively?

Answer 1

you have to update ag grid column definitions when you want to compare:

compare() {
    const columnDef = [
        { headerName: 'header 1', field: 'header1' },
        { headerName: 'second header 1', field: 'secondHeader1' },
        { headerName: 'header 2', field: 'secondHeader2' },
        { headerName: 'second header 2', field: 'header2' },
        { headerName: 'header 3', field: 'secondHeader3' }
        { headerName: 'second header 3', field: 'header3' }
    ];
...

then you should update ag grid column def like this:

this.gridApi.setColumnDefs(columnDef);

and you should update grid data as well:

this.gridApi.setRowData(newData) //
}