fuse-angular/src/assets/angular-material-examples/table-sorting/table-sorting-example.html

<div class="example-container mat-elevation-z8">
  <md-table #table [dataSource]="dataSource" mdSort>

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container mdColumnDef="userId">
      <md-header-cell *mdHeaderCellDef md-sort-header> ID </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container mdColumnDef="progress">
      <md-header-cell *mdHeaderCellDef md-sort-header> Progress </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container mdColumnDef="userName">
      <md-header-cell *mdHeaderCellDef md-sort-header> Name </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container mdColumnDef="color">
      <md-header-cell *mdHeaderCellDef md-sort-header> Color </md-header-cell>
      <md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>
</div>