title: How do I synchronize the scroll of two data table contents together (ag-grid)
body: <p>I am using ag-grid in Angular and I want to have two data table (ag-grid) one below the other. </p>
  
  <p>The content of both the data table should move together, when I make a scroll in table 1 or table 2. That is the scroll of both the data table should be synchronized.</p>
  
  <p>The HTML for the same is as below:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div id="grid-wrapper"&gt;
      &lt;ag-grid-angular #agGrid1 id="myGrid1" class="ag-theme-balham" [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef" [rowData]="rowData"&gt;&lt;/ag-grid-angular&gt;
  &lt;/div&gt;
  &lt;div id="grid-wrapper"&gt;
      &lt;ag-grid-angular #agGri2 id="myGrid2" class="ag-theme-balham" [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef" [rowData]="rowData"&gt;&lt;/ag-grid-angular&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component code:</p>
  
  <pre><code>this.agGrid1._nativeElement.onscroll = function() {
    this.agGrid2._nativeElement.scrollTop=this.agGrid1._nativeElement.scrollTop;
  }
  this.agGrid2._nativeElement.onscroll = function() {
    this.agGrid1._nativeElement.scrollTop=this.agGrid2._nativeElement.scrollTop;
  }
  </code></pre>
  
  <p>I have tried the scenario in <strong>stackblitz</strong>. But I was not able succeed. But tried similar scenario in case of two divs and its working for the same. Below is the POC that i tried:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-ag-grid-common-scroll?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ag-grid-common-scroll?file=src%2Fapp%2Fapp.component.ts</a></p>
  
  <p><a href="https://angular-ag-grid-common-scroll.stackblitz.io" rel="nofollow noreferrer">https://angular-ag-grid-common-scroll.stackblitz.io</a></p>