How to convert the table header's rows in to columns using Angular 5 Primeng

Question

I would like to convert the table data from horizontal to vertical.

My angular code as below:

Html:

<p-dataTable [value]="gridMenuOptions" reflow="true">
    <p-column field="Name" header="Name"></p-column>
    <p-column field="phone" header="phone"></p-column>
</p-dataTable>

.ts:

this.gridMenuOptions = [
    {"Name":"lak","Predicted phone":"0"},
    {"Name":"sar","Predicted phone":"0"}
]

Getting output as below,

    Name   phone
    lak    0
    sar    0

Expected output:

    Name lak   sar
    phone 0     0

score 0 · Answer 1 · answered Mar 23 '21 at 14:18

First you need to rotate your data How do you rotate a two dimensional array?

var getArray2d = function(a, x, y) {
   return a[y][x];
 };

 //demo
 var arr = [
   [5, 4, 6],
   [1, 7, 9],
   [-2, 11, 0],
   [8, 21, -3],
   [3, -1, 2]
 ];

 var newarr = [];
 arr[0].forEach(() => newarr.push(new Array(arr.length)));

 for (var i = 0; i < newarr.length; i++) {
   for (var j = 0; j < newarr[0].length; j++) {
     newarr[i][j] = getArray2d(arr, i, j);
   }
 }
 console.log(newarr);

The data you prepare, you may need to push extra info into columns to be new header columns if needed.

Then in your html, you need to display two dimensional array.

 <p-table [columns]="columns" [value]="tableItems" >
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns; let indexOfelement1=index;">
                {{col}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns; let indexOfelement=index;">
            {{rowData[indexOfelement]}}
            </td>
        </tr>
    </ng-template>
</p-table>

How to convert the table header's rows in to columns using Angular 5 Primeng

1 Answers1