In my project, I am working with 3 arrays of data - DATA_CENT, DATA_NORTH, and DATA_WEST. Each of these arrays contains another array called data, which I need to extract and display in a table format.
For each new column, I create a new table and then populate it with the extracted data.
<table *ngFor="let elem of COLUMN_NAMES">
<thead>
<tr>
<th colspan="4" class="top">{{elem}}</th>
</tr>
<tr>
<th class="top-1">all</th>
<th class="top-1">done</th>
<th class="top-1">ctrl</th>
<th class="top-1">rjct</th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody *ngIf="showcent">
<tr *ngFor="let comp of elem.data">
// Render DATA_CENT.data information here
<td>{{comp.all}}</td>
<td>{{comp.done}}</td>
<td>{{comp.ctrl}}</td>
<td>{{comp.rjct}}</td>
</tr>
</tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody *ngIf="shownorth">
<tr *ngFor="let comp of elem1.data">
// Display DATA_NORTH information
<td>{{comp.all}}</td>
<td>{{comp.done}}</td>
<td>{{comp.ctrl}}</td>
<td>{{comp.rjct}}</td>
</tr>
</tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody *ngIf="showwest">
<ng-container>
<tr *ngFor="let comp of elem1.data">
// Display DATA_WEST information
<td>{{comp.all}}</td>
<td>{{comp.done}}</td>
<td>{{comp.ctrl}}</td>
<td>{{comp.rjct}}</td>
</tr>
</ng-container>
</tbody>
</table>
I am facing challenges in rendering the table correctly due to loop placement issues. Sometimes the cells are not fitting properly in the table structure.
You can view the table format here: https://i.sstatic.net/fqRUu.png
PS: The first 3 cells in the first column are buttons which control the folding/unfolding of associated data.
If you need more information, you can visit the project's GitHub page: https://github.com/kulaska/Table-app/tree/table_el_toggle_branch