PrimeNG Table body doesn't display data

Question

I am having trouble trying to fetch data to my overlay.Where did I go wrong ?

My goal is to fetch from an user array ,data (like cId,logged hours) and display it inside my table.

<button
  [disabled]="false"
  (click)="op1.show($event)"
  pButton
  type="button"
  class="ui-button-primary"
  label="View"
></button>

<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
  <p-table [value]="day" [style]="{ width: '400px' }" [rows]="5">
    <ng-template pTemplate="header">
      <tr>
        <td class="headerItem">{{ wbsElement }}</td>
        <td class="headerItem">{{ saturday }}</td>
        <td class="headerItem">{{ sunday }}</td>
        ...
        <td class="headerItem">{{ total }}</td>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-day>
      <tr>
        <td>{{ user.cId }}</td>
        <td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
        <td>{{ totalHours }}</td>
      </tr>
    </ng-template>
  </p-table>
</p-overlayPanel>

Above I've got my template that is supposed to create my overlay as shown here

  wbsElement = Constants.WBS_ELEMENT;
  saturday = Day.SATURDAY;
  sunday = Day.SUNDAY;
  monday = Day.MONDAY;
  ...
  total = Constants.TOTAL;
  user: User;
  totalHours: number = 0;

  constructor(private configService: ConfigService) {}

  ngOnInit() {
    this.configService.getUsers().subscribe(users => {
      this.user = users[0];
    });
    this.getTotalHours();
  }

  private getTotalHours() {
    this.user.days.forEach(day => (this.totalHours += day.hoursLogged));
  }

This is what I have inside my ts file. user accepts dummy data from the first element of users array. Here's a preview of what it receives:

{
      name: "test",
      cId: "akaskdasda",
      email: "[email protected]",
      platformUser: "akakaksda",
      days: [
        { weekday: Day.MONDAY, hoursLogged: 5 },
        { weekday: Day.TUESDAY, hoursLogged: 8 },
        ...
        { weekday: Day.SUNDAY, hoursLogged: 5 }
      ]
 },

Currently ,there's no error is displayed inside console that would help me find out the reason of this behaviour and the output is not desired .

As you can see inside the imgur link , the elements go outside of the table (I dont understand this behaviour). I tried removing my double bindings from table body and printing out random data to see if that would work(I've also removed [value]="day" and let-day when I did this) ,however nothing was shown.Last thing I've tried was replacing ng-template with divs (because essentially that's what they are -as far as my understanding goes) but that didnt go well either.

Illogicality

Answer 1

Managed to solve this by ditching p-table and using a normal table instead. Apparently , as I found here ,p-table expects an array because of [value]="user".

Illogicality

I realize this is very late, but you can also pass in an empty array to values and the p-table will work. Will add answer below – Apiece

Answer 2

It is correct that PrimeNg requires a [value] in order to create a static table.

However, you can pass in an empty array and do everything else statically as desired. So if inside the <p-table... you add [value]="[[]]", you can set up everything else statically inside the <tr>s and <td>s.

Figure I would post this here in case anyone else has a similar issue before giving up on the p-table altogether.

Apiece

Thanks. An array with one object will do (in the comment to tearswep you mentioned an empty array). This works: [value]="[{}]" Your array in an array will work, since the inner array is an object. However an empty object seems neater. – Feigin

Answer 3

You have to assign user variable to the table value. Try this.

<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
  <p-table [value]="user" [style]="{ width: '400px' }" [rows]="5">
  <ng-template pTemplate="header">
    <tr>
      <td class="headerItem">{{ wbsElement }}</td>
      <td class="headerItem">{{ saturday }}</td>
      <td class="headerItem">{{ sunday }}</td>
      ...
      <td class="headerItem">{{ total }}</td>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-user>
    <tr>
      <td>{{ user.cId }}</td>
      <td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
      <td>{{ totalHours }}</td>
    </tr>
  </ng-template>
  </p-table>
</p-overlayPanel>

Unsparing

just tried that and it throws back an error : OverlayComponent.html:11 ERROR TypeError: this.value.sort is not a function – Illogicality

line 11 from my template file is this : <p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false"> – Illogicality

can you please provide stalkbitz or plunker for demo? – Unsparing

I managed to solve this by replacing p-table with table (because otherwise I'd need to rewrite the way I work with data and I don't want that) and tinkering with the css – Illogicality