title: Sort table data with Angular Material
body: <p>I have setup a component using Angular and Material. I have the data I want exposed correctly using the BitBucket status API: 
  <a href="https://bitbucket.status.atlassian.com/api#status" rel="nofollow noreferrer">https://bitbucket.status.atlassian.com/api#status</a></p>
  
  <p>I am just stuck on how to enable sort on the columns, I would like to sort all 3 using the default settings. Any direction would be appreciated.</p>
  
  <p>Here is a stackblitz: <a href="https://stackblitz.com/edit/angular-gmdy9j" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-gmdy9j</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="example-table-container"&gt;
  
      &lt;table mat-table [dataSource]="data"
             matSort matSortActive="name" matSortDirection="desc"&gt;
  
  
        &lt;ng-container matColumnDef="name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header disableClear&gt;Name&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.name}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef="status"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Status&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.status}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef="created_at"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;
            Created
          &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.created_at | date}}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>import {HttpClient} from '@angular/common/http';
  import {Component, ViewChild, AfterViewInit} from '@angular/core';
  import {MatSort} from '@angular/material';
  import {merge, Observable, of as observableOf} from 'rxjs';
  import {catchError, map, startWith, switchMap} from 'rxjs/operators';
  
  @Component({
    selector: 'app-headlines',
    templateUrl: './headlines.component.html',
    styleUrls: ['./headlines.component.scss']
  })
  
  export class HeadlinesComponent implements AfterViewInit {
    displayedColumns: string[] = ['name', 'status', 'created_at'];
    tableDatabase: TableHttpDatabase | null;
    data: BitBucketIssue[] = [];
  
    resultsLength = 0;
    isLoadingResults = true;
  
  
    @ViewChild(MatSort) sort: MatSort;
  
    constructor(private http: HttpClient) {}
  
    ngAfterViewInit() {
      this.tableDatabase = new TableHttpDatabase(this.http);
  
      merge(this.sort.sortChange)
        .pipe(
          startWith({}),
          switchMap(() =&gt; {
            this.isLoadingResults = true;
            return this.tableDatabase!.getRepoIssues(
              this.sort.active, this.sort.direction);
          }),
          map(data =&gt; {
  
            // Flip flag to show that loading has finished.
            this.isLoadingResults = false;
            this.resultsLength = data.incidents.length;
            console.log(data.incidents.length)
            console.log(data.incidents)
            return data.incidents;
  
          }),
          catchError(() =&gt; {
            this.isLoadingResults = false;
            return observableOf([]);
          })
        ).subscribe(data =&gt; this.data = data);
    }
  }
  
  export interface BitBucketApi {
    incidents: BitBucketIssue[];
  }
  
  export interface BitBucketIssue {
    name: string;
    status: string;
    created_at: number;
  }
  
  /** An example database that the data source uses to retrieve data for the table. */
  export class TableHttpDatabase {
    constructor(private http: HttpClient) {}
  
    getRepoIssues(sort: string, order: string): Observable&lt;BitBucketApi&gt; {
      const href = 'https://bqlf8qjztdtr.statuspage.io/api/v2/incidents.json';
      const requestUrl =
          `${href}?q=&amp;sort=${sort}&amp;order=${order}`;
  
      return this.http.get&lt;BitBucketApi&gt;(requestUrl);
    }
  }
  </code></pre>
  
  <p>Here is a stackblitz: <a href="https://stackblitz.com/edit/angular-gmdy9j" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-gmdy9j</a></p>