Angular mat-table Sticky Column overlaps when Scrolled

Question

I'm using Angular 8's table (not using flex) with first 2 columns as sticky.

Issue :

1. The main issue is the space between the 1st and 2nd columns which leads to other issues.
2. When I do a horizontal scroll, the scrolling data is visible in the space between those columns
3. There is a css property which sets left to be 159px. How is this calculated?

Reproducing the issue.

Use Angular's table example with sticky columns. https://stackblitz.com/angular/lynkxvonedv?file=src%2Fapp%2Ftable-sticky-columns-example.html

1. Add Sticky to the 2nd column (Position)
2. Add a long text to any non-sticky column. (I have used it for Weight column).

Thanks in Advance.

Answer 1

I found a workaround which may help you.

constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
}

GitHub Link: https://github.com/angular/components/issues/15885

Answer 2

For me mat table was inside a *ngIf condition so I have to do something like below.

@ViewChild('matTable', { static: false }) set table(matTable: MatTable<any>) {
    if (matTable) {
      this.ngZone.onMicrotaskEmpty
        .pipe(take(3))
        .subscribe(() => matTable.updateStickyColumnStyles())
    }
  }