title: Angular material table drag and drop columns doesn't update rows
body: <p>Is there a way to update an Angular Material table's datasource (rows) according to the changes that have been made by drag and drop on the columns?</p>
  
  <p>I have a <code>dropListedDrop</code> event which updates columns:</p>
  
  <pre class="lang-js prettyprint-override"><code>dropListDropped(event: CdkDropList, index: number) {
    if (event) {
      moveItemInArray(this.headers, this.previousIndex, index);
      this.setDisplayedColumns();
    }
  }
  </code></pre>
  
  <p>But the data in dataSource isn't being changed automatically after the drag and drop action completes.</p>
  
  <p>Example here: <a href="https://stackblitz.com/edit/angular-material-table-drag-col?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">StackBlitz</a></p>