How to show split header in the material table having nested group of data in angular

I am having trouble displaying data in the material table when the data is coming as a nested array of objects.

I would like to display the table which is currently displayed in the stackblitz.

If I changed the existing data with my newData variable it will start breaking whole table.

Can anybody guide me How I can achieve split header function with group of nested data in the material table?

I would like to achieve something like this.

Here is my stackblitz. https://stackblitz.com/edit/angular-bklajw-5foa62

Solution 1:

the data source need to be an array of data you want to display. So you have to change

dataSource1 = newData;

to

dataSource1 = newData.data.summary;

You will also need to change the columns in the template since the objects are different, for example:

<td mat-cell *matCellDef="let element" class="similar-cell-width">{{ element.data[0].amount }}</td>