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 yogurt	159	6.0	24	4.0
Ice cream sandwich	237	9.0	37	4.3
Eclair	262	16.0	24	6.0
Cupcake	305	3.7	67	4.3
Gingerbread	356	16.0	49	3.9

HTML

<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>