Angular › Angular Material & UI Component Libraries

How would you build a responsive data table using Angular Material's table component?

Intermediate

Answer

Angular Material's table component works together with a data source, and you define which columns to display using column definitions in your template, giving you a fully functional, sortable, and accessible table without manually building the table markup and behavior yourself.

<table mat-table [dataSource]="users">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let user">{{ user.name }}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="['name']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name']"></tr>
</table>

Real-world example An admin panel displays a list of users in a sortable, accessible table using Angular Material's table component, saving significant time compared to building the same table markup by hand.

Common follow-ups: How would you add sorting and pagination to this same table?;What is the MatTableDataSource class and how does it help manage the table's data?

Data Binding;Pipes (Built-in & Custom)