title: How to do default multi sort?
body: <p>this is my current code:</p>
  
  <pre><code>displayedColumns: string[] = ['id', 'dataYear', 'dataMonth', 'population', 'sources', 'created_at', 'updated_at', 'actions'];
  
  @ViewChild(MatSort) sort: MatSort;
  
  ngOnInit() {
  
     this.sort.sort(&lt;MatSortable&gt;({id: 'updated_at', start: 'desc'}));
     this.listData.sort = this.sort;
  }
  </code></pre>
  
  <p>I can only make a default sorting for one column.
  What if I would like to do three column ( dataYear, dataMonth, updated_at) of sorting?</p>
  
  <p>Below content is the HTML component:</p>
  
  <pre><code>&lt;mat-table [dataSource]="listData" matSort&gt;
  &lt;ng-container matColumnDef="id"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header class="hide"&gt; Id. &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element" class="hide"&gt; {{element.id}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="dataYear"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Year &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element"&gt; {{element.dataYear}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="dataMonth"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Month &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element"&gt; {{element.dataMonth}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="population"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Population &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element"&gt; {{element.population}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="sources"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Sources &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element"&gt; {{element.sources}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="created_at"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Created Time &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element"&gt; {{element.created_at}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="updated_at"&gt;
  &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Updated Time &lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let element"&gt; {{element.updated_at}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="actions"&gt;
  &lt;mat-header-cell *matHeaderCellDef&gt;&lt;/mat-header-cell&gt;
  &lt;mat-cell *matCellDef="let row"&gt;
  &lt;button mat-icon-button (click)="onEdit(row)"&gt;&lt;mat-icon&gt;launch&lt;/mat-icon&gt;&lt;/button&gt;
  &lt;button mat-icon-button color="warn" (click)="onDelete(row.id)"&gt;&lt;mat-icon&gt;delete_outline&lt;/mat-icon&gt;&lt;/button&gt;
  &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>