title: Angular Material Table: Sorting not working
body: <p>In my Angular app (using Angular Material) I have several tables.</p>
  
  <p>The strange thing is that, in one case, sorting works, while, in another case, it doesn't.</p>
  
  <p>Here is the table that works:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort&gt;
  
    &lt;ng-container matColumnDef="id"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; ID &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.id}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="firstName"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; First Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.firstName}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="lastName"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Last Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.lastName}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="viewProfile"&gt;
      &lt;th mat-header-cell *matHeaderCellDef class="viewProfile"&gt; Profile &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row" class="viewProfile"&gt;
        &lt;button mat-icon-button (click)="openProfile(row.id)"&gt;
                  &lt;mat-icon aria-label="icon-button with a page-view icon"&gt;pageview&lt;/mat-icon&gt;
                &lt;/button&gt;
      &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;
  </code></pre>
  
  <p>... and here is the table that doesn't work:</p>
  
  <pre><code>&lt;table class="table2" mat-table [dataSource]="dataSource2" matSort&gt;
  
    &lt;ng-container matColumnDef="name"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Project &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.name}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="role"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Role &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.role}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="beginning"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Beginning &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.beginning | date : "mediumDate"}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="end"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; End &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let row"&gt; {{row.end | date : "mediumDate"}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns2"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns2;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>As you can see, in both cases I use "<code>matSort</code>" (in the <code>table</code> tag) and "<code>mat-sort-header</code>" (for the columns that are supposed to be sortable).</p>
  
  <p>Furthermore, in each case I do the same import in the component.ts file:</p>
  
  <pre><code>import { MatTableDataSource, MatPaginator, MatSort, MatDialog } from '@angular/material';
  </code></pre>
  
  <p>I just don't get why sorting works in the first case but not in the second.
  Does anybody have any ideas what's going on here?</p>