title: How to sort MatTableDataSource programmatically?
body: <p>I'm trying to sort the MatTableDataSource programmatically so that I can sort the data via the use of a button rather than by the table column header when viewing the data in a specific mobile layout. However, I'm having trouble doing so. </p>
  
  <p>I've followed <a href="https://stackoverflow.com/a/51787040/8216367">this post's</a> advice on how to do it but the data sort is not being reflected. The mobile layout design for using the same data as the table:</p>
  
  <pre><code>&lt;mat-card matSort *ngFor="let item of dataSource.filteredData"&gt;
  </code></pre>
  
  <p>The function I'm using to try and sort the data is:</p>
  
  <pre><code>sortDataSource(id: string, start: string){
    this.dataSource.sort.sort(&lt;MatSortable&gt;({id: id, start: start}));
  }
  </code></pre>
  
  <p>which is called from tapping onto a button within a mat-menu e.g.</p>
  
  <pre><code>&lt;mat-menu #sortMenu="matMenu" yPosition="below" [overlapTrigger]="false"&gt;
              &lt;button mat-menu-item (click)="sortDataSource('createdDate', 'asc')"&gt;&lt;span&gt;Creation Date&lt;/span&gt;&lt;mat-icon&gt;arrow_upward&lt;/mat-icon&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Any help on this would be greatly appreciated!</p>
  
  <p><a href="https://stackblitz.com/edit/angular-zrkpa8" rel="noreferrer">Link to StackBlitz.</a></p>
  
  <p>Edit: Adding where I'm assigning the data to the table's dataSource which comes from an Observable array:</p>
  
  <pre><code>this.data$.subscribe(data =&gt; {
        this.dataSource.data = data;
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
  }
  </code></pre>
  
  <p>Edit 2: Removed error image as fixed by add "matSort" to the the <code>mat-card</code> using <code>*ngFor</code> for creating the mobile layout version of the <code>mat-table</code>.</p>