title: Angular Material 2 DataTable Sorting with nested objects
body: <p>I have a normal Angular Material 2 DataTable with sort headers.
  All sort are headers work fine. Except for the one with an object as value.
  These doesn't sort at all. </p>
  
  <p>For example:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;!-- Project Column - This should sort!--&gt;
      &lt;ng-container matColumnDef="project.name"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Project Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.project.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  </code></pre>
  
  <p>note the <code>element.project.name</code></p>
  
  <p>Here's the displayColumn config:</p>
  
  <pre><code> displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];
  </code></pre>
  
  <p>Changing <code>'project.name'</code> to <code>'project'</code> doesn't work nor <code>"project['name']"</code></p>
  
  <p>What am I missing? Is this even possible?</p>
  
  <p>Here's a Stackblitz:
  <a href="https://stackblitz.com/edit/angular-rtw2fx" rel="noreferrer">Angular Material2 DataTable sort objects</a></p>
  
  <p><strong>Edit:</strong>
  Thanks for all your answers.
  I've already got it working with dynamic data. So I don't have to add a switch statement for every new nested property.</p>
  
  <p>Here's my solution: (Creating a new DataSource which extends MatTableDataSource is not necessary)</p>
  
  <pre class="lang-js prettyprint-override"><code>export class NestedObjectsDataSource extends MatTableDataSource&lt;MyObjectType&gt; {
  
    sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) =&gt; string | number) =
      (data: WorkingHours, sortHeaderId: string): string | number =&gt; {
        let value = null;
        if (sortHeaderId.indexOf('.') !== -1) {
          const ids = sortHeaderId.split('.');
          value = data[ids[0]][ids[1]];
        } else {
          value = data[sortHeaderId];
        }
        return _isNumberValue(value) ? Number(value) : value;
      }
  
    constructor() {
      super();
    }
  }
  </code></pre>