Ngx Datatable to display one row entry

Question

Table Image I would like to display all the trans types but the correlation id must only appear once. How do I achieve this from the front end?

HTML code:

        <ngx-datatable #tblCorrelations class="material fullscreen" [rows]="details" [columnMode]="'force'" [headerHeight]="'auto'" [footerHeight]="50" [rowHeight]="50" [limit]="15" [selected]="selected" [selectionType]="'single'">
            <ngx-datatable-column name="Correlation ID" id="correlationid">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{row.correlationid}}
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Trans Type" id="transtype">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{row.transtype}}
                </ng-template>
            </ngx-datatable-column>
        </ngx-datatable>

What would my typescript code look like? Bear in mind, the correlation id is not the trans type id. This is all been pulled from the database and not hard-coded

Currently, the display repeats the correlation id and display the trans types I want the correlation id to appear once only and all its trans types

Answer 1

Your details must look like this. (can be a Class or an Interface)

export class/Interface InterfaceName {
 correlationId: number;
 transType: string[];
}

In your .ts File, declare details as:

public details: InterfaceName[];