Angular 6 Mat Tables sync scrolling

Question

I have two mat tables side by side on a horizontal plane

the one on the left is there to materialize "pinned" columns, the one on the right is scrollable both vertically and horizontally.

I now want to sync up both table's scrolling, as in, the left one isn't going to have a scroll bar and the right one is

I want the right one's scroll to always be automatically applied to the left one.

this will male both look like a single table with columns pinned on the left.

I'm asking this here because I only found solutions that are very "jquery" such as : Synchronized scrolling using jQuery?

and thus far I've striving to be as "google standard" as it gets in my angular 6 project. my code is very ECMAScript and angular - oriented I've little to no jquery.

and I'm worried about performance and whatever code I use eventually not keeping up and eventually breaking the illusion.

is jquery really the best way to do this?

UPDATE 1 :

so far I've got (DOM) :

<!--1-->
      <mat-table #table1 [dataSource]="dataSource" matSort class="pinned catching-scrolling">
<--lots of dom...-->
<!--2-->
      <mat-table #table2 [dataSource]="dataSource" matSort class="unpinned" (scroll)="syncScroll(table2)">
<--more dom...-->

ts :

  syncScroll(div){
    const d1 = this.element.nativeElement.querySelector('.catching-scrolling');
    console.log(d1 , div);
    d1.scrollTop = div.scrollTop;
  }

now all of these : #table2 (scroll)="syncScroll(table2)", (scroll)="syncScroll(element)", (scroll)="syncScroll($event)" are pretty good since they do send back elements that I could theoretically sync with but I just want to clean this up so that my dom is already sending the right thing from which I can point to scrollTop or the likes for both.

right now I have differing items on both.

UPDATE 2

(scroll)="syncScroll($event.srcElement) sends back the right element and this makes for minimal code where the scrollbars actually do sync up :)

now the question remains : is using jquery (even in this Angular-ish manner) the fastest, most optimized solution?

score 0 · Accepted Answer · answered May 31 '18 at 13:38

So here's what I have but am not satisfied with :

The issues are browser support and perf, on chrome or edge it works fine but if I go to firefox, my code fails entirely plus I have the scrollbar.

plus edge has latency so maybe my idea that this code is not performant is true.

ts :

  leftS;
  rightS;
  leftTimeout;
  rightTimeout;
  syncScrollRightBeingCalled = false;
  syncScrollLeftBeingCalled = false;

  constructor(
    private element: ElementRef) {
    this.dataSource = new MatTableDataSource();
  }

  ngAfterViewInit() {
    this.leftS = this.element.nativeElement.querySelector('.catching-scrolling-left');
    this.rightS = this.element.nativeElement.querySelector('.catching-scrolling-right');
  }

  syncScrollLeft(div){
    clearTimeout(this.leftTimeout);
    if(!this.syncScrollRightBeingCalled){
      this.syncScrollLeftBeingCalled = true;
      this.leftS.scrollTop = div.scrollTop;
    }
    this.leftTimeout = setTimeout(() => this.syncScrollLeftBeingCalled = false, 25);
  }
  syncScrollRight(div){
    clearTimeout(this.rightTimeout);
    if(!this.syncScrollLeftBeingCalled) {
      this.syncScrollRightBeingCalled = true;
      this.rightS.scrollTop = div.scrollTop;
    }
    this.rightTimeout = setTimeout(() => this.syncScrollRightBeingCalled = false, 25);
  }

html :

<mat-table #table1 [dataSource]="dataSource" matSort class="pinned catching-scrolling-right" (scroll)="syncScrollLeft($event.srcElement)">
<mat-table #table2 [dataSource]="dataSource" matSort class="unpinned catching-scrolling-left" (scroll)="syncScrollRight($event.srcElement)">

css :

.unpinned{
  height: calc(100vh - 430px);
}
.pinned{
  height: calc(100vh - 447px);
}
.pinned{
  -ms-overflow-style: none;
  overflow: auto;
  width: 560px;
}
.unpinned{
  overflow: scroll;
  flex: 1;
}
/deep/ .pinned::-webkit-scrollbar {
  width: 0;
}

I found this : http://jsfiddle.net/qqPcb/

but it just refuses to apply to my case.

I just loose the ability to scroll over 100% of browsers on the contained div.

Angular 6 Mat Tables sync scrolling

1 Answers1