angular primeng p-table pagination not working

Question

When populating the table array inside a the get() function, the paginator does not working. It only shows 1 of 1 page.

It works fine when the table array is populated inside ngInit(), showing 1 of 5 pages.

This is very weird looks like a bug ? any ideas? My angular component is below.

test.html

<div class="p-col-1">
  <button pButton type="button" label="GET" (click)="get()"></button>
</div>

<div class="p-grid">
  <div class="p-col">
    <p-table
      [value]="workingArr"
      [rows]="2"
      [paginator]="true"
      [responsive]="true"
      autoLayout="true"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>testPaginator</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-workingArr>
        <tr>
          <td>{{workingArr}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

<div class="p-grid">
  <div class="p-col">
    <p-table
      [value]="notworkingArr"
      [rows]="2"
      [paginator]="true"
      [responsive]="true"
      autoLayout="true"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>testPaginator</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-notworkingArr>
        <tr>
          <td>{{notworkingArr}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

test.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.css"]
})
export class TestComponent implements OnInit {
  workingArr: string[] = [];
  notworkingArr: string[] = [];

  constructor() {}

  ngOnInit() {
    for (let a = 0; a < 10; a++) {
      this.workingArr[a] = "test" + a;
      console.log("in init");
    }
  }

  get() {
    for (let b = 0; b < 10; b++) {
      this.notworkingArr[b] = "test" + b;
      console.log("in get");
    }
  }
}

this is the result after clicking the get button

sloth sloth · Accepted Answer · 2018-10-18T11:19:48

You have to call reset() on the TurboTable component if you change the source array this way, e.g.:

<div class="p-col-1">
  <button
    pButton
    type="button"
    label="GET"
    (click)="get(); table.reset()"
  ></button>
</div>
...
<div class="p-grid">
  <div class="p-col">
    <p-table
      #table
      [value]="notworkingArr"
      [rows]="2"
      [paginator]="true"
      [responsive]="true"
      autoLayout="true"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>testPaginator</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-notworkingArr>
        <tr>
          <td>{{notworkingArr}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

angular primeng p-table pagination not working

2 Answers