Sort Header

mat-sort-header enables column-based sorting on tables and lists.

Basic Sort Header

Sortable table columns using mat-sort-header with matSort directive.

Name
Calories
Fat (g)
Carbs (g)
Protein (g)
Frozen yogurt1596.0244.0
Ice cream sandwich2379.0374.3
Eclair26216.0246.0
Cupcake3053.7674.3
Gingerbread35616.0493.9
Code
<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let d">{{ d.name }}</td>
  </ng-container>
  <ng-container matColumnDef="calories">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Calories</th>
    <td mat-cell *matCellDef="let d">{{ d.calories }}</td>
  </ng-container>
  <!-- ... additional columns ... -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let r; columns: displayedColumns;"></tr>
</table>