Power to 2 and 3 from inside TS file for p-table

Question

I have a p-table called cols:

TS file:

public cols: any[];
    
   public ngOnInit(): void {
    this.cols = [
      { field: 'length', header: 'Length (m)' },
      { field: 'width', header: 'Width (m)' },
      { field: 'height', header: 'Height (m)' },
      { field: 'area', header: 'Area (m2)' },
      { field: 'volume', header: 'Volume (m3)' },
    ];
  }

HTML file:

<p-table [value]="cols">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-col>
        <tr>
            <td *ngFor="let col of cols">
                {{col[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Area and Volume are respectively in square meter and cubic meter. How should I modify Area (m2) and Volume (m3) so that they show m to the power 2 and 3 in correct format?

I have already triedtags, but it did not help:

 this.cols = [
      ....
      { field: 'area', header: 'Area (m<sup>2</sup>)' },
      { field: 'volume', header: 'Volume (m<sup>3</sup>)' },
    ];   

EDIT: Please note that my issue is not how to populate the results (numbers), rather how to show the headers correctly. To make it clear what I mean by correct and incorrect formats see this:

Right now the exponents in the headers are shown in incorrect format.

Answer 1

Try:

ts

this.cols = [
      ....
      { field: 'area', header: 'Area (m<sup>2</sup>)' },
      { field: 'volume', header: 'Volume (m<sup>3</sup>)' },
];

html

<ng-template pTemplate="body" let-col>
    <tr>
        <ng-container *ngFor="let col of cols">
            <td [innerhtml]="col[col.field]"></td>
        </ng-container>
    </tr>
</ng-template>

Same as : https://stackoverflow.com/a/34424375/8944414 StackBlitz