title: How to maintain vertical scroll when updating Angular 5 data table?
body: <p>I'd like to frequently update my data table (Covalent <code>td-data-table</code> with several <code>ng-template</code>) with new data pulled from a JSON REST API.  More rows than will fit on browser so user may need to scroll vertically.  But when I update the data in the table it redraws completely i.e. the vertical scroll position resets to the top, tool tips flash, etc.. </p>
  
  <p>Hacks to e.g. save/restore the vertical scroll such as below kind of work but they create a lot of visual mess, especially in Firefox.</p>
  
  <pre class="lang-js prettyprint-override"><code>// save vertical scroll
  this.scrollTop = this.tableElt.nativeElement.querySelector('.td-data-table-scrollable').scrollTop;
  
  // update table data here
  this.data = newData;
  
  // restore vertical scroll
  setImmediate(() =&gt; {
      this.tableElt.nativeElement.querySelector('.td-data-table-scrollable').scrollTop = this.scrollTop;
    }
  });
  </code></pre>
  
  <p>How can I cleanly update the data in a table (or any component really) without hacking to reset scroll positions &amp; putting up with a lot of flashing behaviour?  </p>
  
  <p>If there is no solution using the Covalent data table, is there another Angular 2+ control that handles this properly?</p>
  
  <p>Animated screen capture of problem:  Vertical scroll snaps back when data is updated.  Vertical scroll should be maintained across data updates.
  <a href="https://i.stack.imgur.com/KEXUY.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/KEXUY.gif" alt="screencapture"></a></p>