Tabelle Dati PrimeNG
Barra Filtri (pattern standard sopra la tabella)
<div class="d-flex flex-row flex-wrap align-items-center gap-2 mb-3">
<div class="flex flex-col gap-1">
<label class="kcs-form-label">Ricerca</label>
<input class="kcs-inputtext kcs-component" [(ngModel)]="searchText" placeholder="Cerca..." />
</div>
<div class="flex flex-col gap-1">
<label class="kcs-form-label">Stato</label>
<p-dropdown [options]="statusOptions" [(ngModel)]="selectedStatus" placeholder="Tutti"
optionLabel="label" optionValue="value" [showClear]="true"></p-dropdown>
</div>
<button class="btn btn-outline-secondary" (click)="clearFilters()">
<i class="pi pi-filter-slash"></i> Pulisci
</button>
</div>
p-table con paginazione, striping, azioni
| ID |
Nome |
Email |
Ruolo |
Stato |
Azioni |
| {{ item.id }} |
{{ item.nome }} |
{{ item.email }} |
{{ item.ruolo }} |
|
|
|
Nessun elemento trovato
|
<!-- Standard: report "{first} - {last} di {total}" a sinistra, righe/pagina (5,10,20,50 - default 20) a destra -->
<p-table [value]="items" [loading]="isLoading" [paginator]="true" [rows]="20"
[rowsPerPageOptions]="[5, 10, 20, 50]" [showCurrentPageReport]="true"
[currentPageReportTemplate]="'{first} - {last} di {totalRecords}'"
[totalRecords]="totalCount" [lazy]="true" (onLazyLoad)="onPageChange($event)"
class="p-datatable-sm p-datatable-striped" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<!-- Ordinamento: pSortableColumn + p-sortIcon (frecce neutre, click = asc/desc) -->
<th pSortableColumn="campo">Colonna <p-sortIcon field="campo" /></th>
<th pSortableColumn="stato">Stato <p-sortIcon field="stato" /></th>
<!-- La colonna Azioni NON è ordinabile -->
<th style="width: 120px">Azioni</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item>
<tr>
<td>{{ item.campo }}</td>
<td><p-tag [value]="item.stato" [severity]="getSeverity(item.stato)"></p-tag></td>
<td>
<button pButton icon="pi pi-pencil" class="p-button-rounded p-button-text p-button-warning" (click)="edit(item)"></button>
<button pButton icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger" (click)="delete(item)"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr><td colspan="3" class="text-center">Nessun elemento trovato</td></tr>
</ng-template>
</p-table>