title: Angular Material table, run time pushed row when sorting
body: <p>I have a table created with Angular material, like this:</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource" matSort&gt;
  &lt;ng-container *ngFor="let item of displayedColumns; let i = index" cdkColumnDef="{{getColumnName(i)|Formater:'clean'}}"&gt;
      &lt;mat-header-cell *cdkHeaderCellDef mat-sort-header class="example-header-cell"&gt; {{item.split('__')[0]}} &lt;/mat-header-cell&gt;
      &lt;mat-cell *cdkCellDef="let row"&gt;
        {{row.values[i]|Formater:'delta'}}
      &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  &lt;mat-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"&gt;&lt;/mat-header-row&gt;
  &lt;mat-row *cdkRowDef="let row; columns: displayedColumns;let index=index"
      class="example-row" (click)="onClick(row, index)" #cdkrow&gt;&lt;/mat-row&gt;
  </code></pre>
  
  <p></p>
  
  <p>and I followed <a href="https://plnkr.co/edit/ZL6OnWwVmOCPYetp96XX?p=preview" rel="nofollow noreferrer">this</a> example to add a detail table when the row clicked, the problem is when its in run time added, and after the column was sorted, the new detail in the old place where the row was before sort, can any one help how to get the new place of the row after sort, so I can maybe use it to push the newly run time created object.</p>