I am working on an Angular application and using PrimeNG to create a table that displays the number of students by class. Currently, I have managed to set up a table with class names in one column and the number of students in another column. However, I need the data to be displayed with class names in rows and the number of students in separate rows. Is there a way to transpose the table while keeping the code clean?
Below is the HTML code for the table:
<p-table [value]="getData()">
<ng-template pTemplate="header">
</ng-template>
<ng-template pTemplate="body" let-data>
<tr>
<td class="legend-cell" >
{{data.className}}
</td>
<td class="non-edit-cell" >
{{data.numStudents}}
</td>
</tr>
</ng-template>
</p-table>
Here is the dummy data being used:
getData(){
let data = [];
data.push({className: 'Class 1', numStudents: 22})
data.push({className: 'Class 2', numStudents: 23})
data.push({className: 'Class 3', numStudents: 24})
return data;
}
The current table layout can be seen in the image below:
https://i.sstatic.net/dK94r.png
However, I want it to look like this (manually edited image):