I have a nested array structure and I am utilizing PrimeNG data table to display the data. Below is the organization of my array:
this.institutionalTimetable = [
{day: "Monday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'English', subjectGroup:'Maths' }, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}]},
{day: "Tuesday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'English', subjectGroup:'Maths' }, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}]},
{day: "Wednesday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'English', subjectGroup:'Maths' }, {startTime: "582", endTime: "634", recess: true, subject: 'English' , subjectGroup: 'Maths'}]}
]
The table structure should list the days in the first column with multiple columns for the entries within each day.
How can I create a <p-column> for each entry within the main array?
This is what I attempted:
<p-dataTable [value]="institutionalTimetable" class="institutetable" >
<p-headerColumnGroup >
<p-row>
<p-column header="Week Days"></p-column>
<p-column header="Time table" [colspan]="10"></p-column>
</p-row>
</p-headerColumnGroup>
<p-column field="day"></p-column>
<p-column field="entries" *ngFor="let entrys of entries">
<ng-template let-col let-entryData="rowData" pTemplate="body">
<span>{{ entrys.startTime }}</span>
</ng-template>
</p-column>
</p-dataTable>