title: Angular - How to sort table data according to specific column
body: <p>I have a table with 3 colums. But I want to sort the table data according to first column (<strong>Domain</strong>) alphabetically. My table html is:</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="tableData"&gt;
      &lt;ng-container cdkColumnDef="domain"&gt;
        &lt;mat-header-cell *cdkHeaderCellDef fxFlex="50%"&gt;Domain&lt;/mat-header-cell&gt;
        &lt;mat-cell *cdkCellDef="let config" fxFlex="50%"&gt;{{config.domain}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container cdkColumnDef="disable"&gt;
        &lt;mat-header-cell *cdkHeaderCellDef fxFlex="30%"&gt;Disabled&lt;/mat-header-cell&gt;
        &lt;mat-cell *cdkCellDef="let config" fxFlex="30%"&gt;{{config.disabled}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container cdkColumnDef="button"&gt;
        &lt;mat-header-cell *cdkHeaderCellDef fxFlex="15%"&gt;&lt;/mat-header-cell&gt;
        &lt;mat-cell *cdkCellDef="let config" fxFlex="15%"&gt;
          &lt;mat-icon (click)="deleteDomain(config)" style="cursor: pointer"&gt;delete_forever&lt;/mat-icon&gt;
        &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *cdkRowDef="let config; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  </code></pre>
  
  <p>And my .ts file for this table is consisting following code :</p>
  
  <pre><code>private _domainData = new BehaviorSubject&lt;Domain[]&gt;([]);
  
    @Input()
    set domainData(value: Domain[]) {
      this._domainData.next(value);
    }
    displayedColumns = ['domain', 'disable', 'button'];
    tableData: Domain[];
  </code></pre>
  
  <p>Is it possible to achieve this ?</p>