Quando dobbiamo creare una rappresentazione tabellare dei dati in Angular, la cosa più semplice è ricorrere all'utilizzo dell'elemento HTML table a alla direttiva ngFor per creare tante righe quanti sono i record da mostrare. Se abbiamo molti component in cui dobbiamo mostrare dati tabellari, può essere comodo usare la DataTable che ci offre Angular CDK.
Questo componente accetta in input un datasource, la lista delle colonne e mette insieme questi dati per generare una tabella per noi. Osserviamo il prossimo esempio.
<table cdk-table [dataSource]="myData"> <!-- FirstName --> <ng-container cdkColumnDef="firstName"> <th cdk-header-cell *cdkHeaderCellDef> first name </th> <td cdk-cell *cdkCellDef="let element"> {{element.firstName}} </td> </ng-container> <!-- LastName --> <ng-container cdkColumnDef="lastName"> <th cdk-header-cell *cdkHeaderCellDef> Last name </th> <td cdk-cell *cdkCellDef="let element"> {{element.lastName}} </td> </ng-container> <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr> <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr> </table>
Ed il relativo codice:
@Component({ templateUrl: 'view.html', }) export class TableExample { displayedColumns: string[] = ['firstName', 'lastName']; dataSource = new [...]; }
Nel tag table inseriamo l'attributo cdk-table che associa la tabella al component di Angular CDK e associamo il data source contenente i dati. Successivamente usiamo un component ng-container per ogni colonna (tramite la direttiva cdkColumnDef). Al suo interno definiamo il tag html per specificare l'intestazione della colonna e la cella che conterrà il valore. Infine, definiamo il tag tr che agisce come riga (tramite la direttiva cdk-header-row) con le intestazioni e un altro tag tr che agisce come contenitore di ogni singola riga (tramite la direttiva cdk-row).
In questo modo possiamo definire logicamente il contenuto della nostra tabella e lasciare che sia Angular CDK a mettere insieme i pezzi e renderizzare il tutto.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Evitare la script injection nelle GitHub Actions
C# 12: Cosa c'è di nuovo e interessante
Generare file PDF da Blazor WebAssembly con iText
Usare le collection expression per inizializzare una lista di oggetti in C#
Definire stili a livello di libreria in Angular
.NET Conference Italia 2023
Gestire liste di tipi semplici con Entity Framework Core
Reactive form tipizzati con modellazione del FormBuilder in Angular
Generare file per il download da Blazor WebAssembly
Gestire i null nelle reactive form tipizzate di Angular
Utilizzare il trigger SQL con le Azure Function