title: How to Implement matSort in Angular 5 Material Table
body: <p>I am following <a href="https://www.youtube.com/watch?v=7VBgI1ejjZQ" rel="nofollow noreferrer">this</a> tutorial and data is being rendered in table. Now I want to implement matSort functionality on table headers. Right now, I am getting data from a service through getUser() function as shown below.</p>
  
  <pre><code>getUser(): Observable&lt;User[]&gt; {
     return this.http.get&lt;User[]&gt;('https://jsonplaceholder.typicode.com/users');
  }
  </code></pre>
  
  <p>Here user model is an interface as shown below</p>
  
  <pre><code>export interface User {
   name: string;
   email: string;
   phone: string;
   company: {
      name: string;
   }
  }
  </code></pre>
  
  <p>I am using service function from component as shown below.</p>
  
  <pre><code>...
  export class UsertableComponent implements OnInit {
    @ViewChild(MatSort) sort: MatSort;
    dataSource = new UserDataSource(this.userService);
    displayedColumns = ['name', 'email', 'phone', 'company'];
    constructor(private http: HttpClient, private userService: UserService) { }
    ngOnInit() { }
    sortData(event) {
      this.dataSource = new UserDataSource(this.userService);
    }
  }
  
  export class UserDataSource extends DataSource&lt;any&gt; {
    constructor(private userService: UserService) {
      super();
    }
    connect(): Observable&lt;User[]&gt; {
      return this.userService.getUser();
    }
    disconnect() { }
  }
  </code></pre>
  
  <p>I have included all mat-sort-header and matSort directives in template. And I am using (matSortChange) event to trigger sortData() function in my component as shown below.</p>
  
  <pre><code>&lt;div&gt;
    &lt;mat-table [dataSource]="dataSource" matSort matSortActive="name" (matSortChange)="sortData($event)" matSortDirection="asc" matSortDisableClear&gt;
      &lt;ng-container matColumnDef="name"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="email"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Email &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.email}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="phone"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Phone &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.phone}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="company"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Company &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.company.name}} &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;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the sortData function is being triggered when click on any table header and receiving sort direction and name of header in event param. </p>
  
  <p>But don't know how to proceed further to sort data? May be I can use subscribe to get data in json, to sort and back in observable?</p>
  
  <p>And also how to set default sort (asc) on name?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I found the solution in <a href="https://github.com/angular/material2/issues/8227" rel="nofollow noreferrer">this</a> link give by <a href="https://github.com/jjorbas" rel="nofollow noreferrer">jjorbas</a>
  Needed to use MatTableDataSource like this</p>
  
  <pre><code>this.dataService.getReport().subscribe(results =&gt; {
  if(!results)return;
  this.ELEMENT_DATA = results;
  this.displayedColumns = [.............];
  this.tbDataSource = new MatTableDataSource(this.ELEMENT_DATA);
  this.tbDataSource.sort = this.sort;
  });
  </code></pre>