title: Sorting mat-table by column value
body: <p>I have a mat-table with customer info. I would like to sort the rows by column value. There is no error but the sorting is not working.</p>
  
  <p>The table tag has <code>matSort</code>:</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" matSort&gt;
  </code></pre>
  
  <p>Each column definition has <code>mat-sort-header</code>:</p>
  
  <pre><code>&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 customer"&gt; {{customer.name}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>In the component class I have</p>
  
  <pre><code>...
  @ViewChild(MatSort) sort: MatSort;
  ...
  ngOnInit() {
      this.dataSource = new MatTableDataSource(this.data as any);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
  }
  </code></pre>
  
  <p>So everything is pretty much like in <a href="https://material.angular.io/components/table/overview#sorting" rel="nofollow noreferrer">the documentation</a> which states</p>
  
  <blockquote>
    <p>If you are using the <code>MatTableDataSource</code> for your table's data source,
    provide the <code>MatSort</code> directive to the data source and it will
    automatically listen for sorting changes and change the order of data
    rendered by the table.</p>
  </blockquote>
  
  <p>but neither the styling nor the functionality for sorting is being applied to the table.</p>
  
  <p><a href="https://stackoverflow.com/q/48731798/3291390">This question</a> is not relevant because the problem is present even with my data hardcoded in the class.</p>
  
  <p>I don't see what I am missing.
  The root of the problem is evading me. You can see my full code and run the <a href="https://stackblitz.com/github/justinemailone/table_sort" rel="nofollow noreferrer">example on Stackblitz</a></p>