Rendering Angular table (can't place for loops right)

JavaScript
1

I have 3 arrays of data. For clarity - arrays are called DATA_CENT , DATA_NORTH and DATA_WEST . Each of them includes another array called data. I need to extract this data array to my table.

As you can see, for each new big column I create new table. Then I need to extract data to each of that columns.

<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">
            // Here I need to render DATA_CENT.data 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="shownorth">
        <tr *ngFor="let comp of elem1.data">
            // DATA_NORTH info
            <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">
                //DATA_WEST info
                <td>{{comp.all}}</td>
                <td>{{comp.done}}</td>
                <td>{{comp.ctrl}}</td>
                <td>{{comp.rjct}}</td>
            </tr>
        </ng-container>
    </tbody>
</table>

I’m having troubles with rendering that table. I can’t place loops right - sometimes there is too many of cells, sometimes they are not fit in table.

Here is how the table looks like:table overview

PS (for better understanding) First 3 cells in first column are buttons. When I press them, data, associated with that button, folds/unfolds

Here is GitHub of the project, if needed: https://github.com/kulaska/Table-app/tree/table_el_toggle_branch