Table paginator not working properly

UI Components for Angular
Post Reply
orellano12
Posts: 1
Joined: 30 Nov 2022, 18:38

30 Nov 2022, 18:43

I'm trying to use the [paginator]=true annotation in a <p-table, but the paginator is not working normally, it shows as if it were disabled. Is curious that after using a filter on the screen the pagination works properly.
I think that the paginator thinks the table is empty, thats why it appears disabled, but it is a problem i have not been able to fix.
My array is being built on the ngOnInit and it starts as an empty array.


Code: Select all

 <div style="width: fit-content">
  <p-table #dt [value]="pokemons" [paginator]="true" [rows]="2">
    <ng-template pTemplate="header">
      <tr>
        <th>Poke</th>
        <th>Number</th>
        <th>Name</th>
        <th>Type</th>
      </tr>
      <tr>
        <th></th>
        <th>
          <input
            style="max-width: 80px"
            pInputText
            type="text"
            (input)="dt.filter($any($event.target).value, 'id', 'contains')"
          />
        </th>
        <th>
          <input
            style="max-width: 150px"
            pInputText
            type="text"
            (input)="dt.filter($any($event.target).value, 'name', 'contains')"
          />
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-pokemon>
      <tr>
        <td>
          <img
            src="{{ pokemon.sprites.front_default }}"
            alt=""
            style="width: 70px"
          />
        </td>
        <td>{{ pokemon.id }}</td>
        <td>{{ pokemon.name | titlecase }}</td>
        <td>
          <span>{{ pokemon.types[0].type.name | titlecase }}</span>
          <span *ngIf="pokemon.types[1]"
            >/{{ pokemon.types[1].type.name | titlecase }}</span
          >
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 14 guests