How do I synchronize the scroll of two data table contents together (ag-grid)

I am using ag-grid in Angular and I want to have two data table (ag-grid) one below the other.

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.

The HTML for the same is as below:

<div>
<div id="grid-wrapper">
<ag-grid-angular #agGrid1 id="myGrid1" class="ag-theme-balham" [columnDefs]="columnDefs"
[defaultColDef]="defaultColDef" [rowData]="rowData"></ag-grid-angular>
</div>
<div id="grid-wrapper">
<ag-grid-angular #agGri2 id="myGrid2" class="ag-theme-balham" [columnDefs]="columnDefs"
[defaultColDef]="defaultColDef" [rowData]="rowData"></ag-grid-angular>
</div>
</div>


Component 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;
}


I have tried the scenario in stackblitz. 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:

https://stackblitz.com/edit/angular-ag-grid-common-scroll?file=src/app/app.component.ts

https://angular-ag-grid-common-scroll.stackblitz.io

Continue reading...