Angular 16 ngxdatatable 20.1.0 not working to display nested table like sub columns inside a column

Question

Have below JSON in testdata.json file:

{
    "ermInfo": [
        {
            "name": "abcd",
            "period": {
                "week": {
                    "pushups": "100",
                    "biseps": "5"
                },
                "quarter": {
                    "pushups": "1000",
                    "biseps": "40"
                }
            }
        },
        {
            "name": "zyx",
            "period": {
                "week": {
                    "pushups": "200",
                    "biseps": "10"
                },
                "quarter": {
                    "pushups": "10000",
                    "biseps": "400"
                }
            }
        }
    ]
}

have below typescript code:

import { Component } from '@angular/core';
import { ColumnMode } from '@swimlane/ngx-datatable';
import { ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-users-table',
encapsulation: ViewEncapsulation.None,
templateUrl: './module-table.component.html',
styleUrls: \['./module-table.component.scss'\],
})
export class ModuleTableComponent {

    rows = [];
    columnMode = ColumnMode.force;
    columns = [
        {prop: 'name'},
        { name: 'week', children: [
            { prop: 'period.week.pushups', name: 'pushups' },
            { prop: 'period.week.biseps', name: 'biseps' }
          ]},
          { name: 'quarter', children: [
            { prop: 'period.quarter.pushups', name: 'pushups' },
            { prop: 'period.quarter.biseps', name: 'biseps' }
          ]}
    ]
    
    constructor() {
        this.fetch(data => {
            var obj = data.ermInfo;
            
            this.rows = data.ermInfo.map((item: any)=>{
                console.log(item.period['week'].pushups);
                return {
                    name: item.name,
                    week: {
                        lines: item.period['week'].pushups,
                        checkins: item.period['week'].biseps
                    },
                    quarter: {
                        lines: item.period['quarter'].pushups,
                        checkins: item.period['quarter'].biseps
                    }
                };
            });
            console.log(this.rows);
            
    
        });
    }
    
    
    fetch(cb: { (data: any): void; (arg0: any): void; }) {
        const req = new XMLHttpRequest();
        req.open('GET', 'assets/testdata.json');
    
        req.onload = () => {
            cb(JSON.parse(req.response));
        };
    
        req.send();
    }

}

have below html code:

\<ngx-datatable class="material" \[rows\]="rows" \[columns\]="columns" \[columnMode\]="columnMode"\>\</ngx-datatable\>

When its displaying its displaying like below:

Name             week           quarter
abcd         [object Object]  [object Object]
zyx          [object Object]  [object Object]

But, need to display like below:

Name             week           quarter
           pushups  biseps  pushups biseps
abcd         100       5      1000     40
zyx          200       10     10000  400

I have tried different ways to achieve this like using individual columns with ng-template etc. And also in typescript putting a different loops code to push the rows array variable, but nothing worked out. Any help would be appreciated to find where it's going wrong. Thank you in advance!