title: How to re-order Angular Material Table?
body: <p><strong>Objective:</strong> Create a table using Angular Material that can be modified using Angular Drag &amp; Drop.</p>
  
  <p><strong>Expected Behavior</strong>: Table should re-order on drag-drop</p>
  
  <p><strong>Current Behavior</strong>: Rows are draggable, and the order of the underlying data source changes, but when the row is dropped it snaps back to its original position in the table.</p>
  
  <p>See this example: </p>
  
  <p><a href="https://stackblitz.com/edit/drag-drop-reorder-mattable" rel="nofollow noreferrer">https://stackblitz.com/edit/drag-drop-reorder-mattable</a></p>
  
  <p>How can this be fixed/implemented?</p>
  
  <p>(Also, I'm not sure why it's styled so poorly in Stackblitz. Any insight there would also be appreciated)</p>
  
  <p><strong>Edit:</strong> I found a super hacky way to get the rows to render again with the correct order, but there's no way this is the way it's expected to be implemented. I just put <code>t.renderRows()</code> to be executed after the drop event handler. See full line below</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-table #t
    cdkDropList
    (cdkDropListDropped)="onListDrop($event); t.renderRows()" 
    [dataSource]="dataSource"
    class="mat-elevation-z8"&gt;
    ...
  &lt;/mat-table&gt;
  </code></pre>
  
  <p><strong>EDIT 2:</strong>
  I've done a simple refactor to use rxjs, and the first drag-drop reorder for each element works great. But when I attempt to move an element that has already been moved once, I don't get the expected behavior. Stackblitz app has been updated.</p>