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.