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>