How to dynamically display the column names of the table header using primeng-CodePudding

I am creating a table (with angular primeng) with the days of the week as header (one day per column), and on the second row I need to put two columns (AM and PM) for each column day.

here is a part of the html code:

<p-table [style]="{width: '100%'}">
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let day of days"
          [innerText]="day.date.format('dddd d MMM yy')"
          colspan="2">
      </th>
    </tr>
    <tr>
      <th [innerText]="'AM'"></th>
      <th [innerText]="'PM'"></th>
    </tr>
  </ng-template>

where days is a list of weekdays [Monday, Tuesday, etc.]

thanks in advance for your help.

CodePudding user response：

You have to use html colspan attribute in order to achieve your desired result. Here is what you can do.

app.component.html

<table>
 <tr>
   <th *ngFor="let day of weekDays" colspan="2">{{day}}</th>
 </tr>
 <tr>
    <ng-container *ngFor="let day of weekDays">
      <td>AM</td>
      <td>PM</td>
    </ng-container>
 </tr>
</table>

app.component.ts

weekDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];

I have created a live demo Here