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

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!

Continue reading...