title: mat-table sort not working with object path key
body: <p>My data that I want to use with mat-table isn't flat - there are layers of different objects.  I can display the data fine but the sorting isn't working.  Here is an example using the element data with the fields sitting down one layer inside a 'foo' object.  How can I get the sorting working?</p>
  
  <p><a href="https://stackblitz.com/edit/angular-b8u3zr?file=src%2Fapp%2Ftable-sorting-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-b8u3zr?file=src%2Fapp%2Ftable-sorting-example.ts</a></p>
  
  <pre><code>const ELEMENT_DATA: PeriodicElement[] = [
    {foo: {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}},
    {foo: {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}},
    {foo: {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}},
    ...
  </code></pre>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
  
    &lt;ng-container matColumnDef="foo.position"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; No. &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.foo.position}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    ...
  
  &lt;/table&gt;
  </code></pre>