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 :

The main issue is the space between the 1st and 2nd columns which leads to other issues.
When I do a horizontal scroll, the scrolling data is visible in the space between those columns
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

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

Thanks in Advance.

score 3 · Accepted Answer · answered Oct 30 '19 at 07:44

3

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

answered Oct 30 '19 at 07:44

Paul Richard

467
6
11

1

let me try this out.. By the way what does this code do ?? – josiebhai Oct 30 '19 at 07:48
1

@josiebhai - onMicrotaskEmpty event is fired when there is no microtasks are enqueued in the current VM. So whenever all microtasks are completed `this.table.updateStickyColumnStyles()` will be called to re calculate the sticky position. And `this.table` you have to do a query using @ViewChild(). – Paul Richard Oct 30 '19 at 07:54

score 2 · Answer 2 · answered Jul 15 '20 at 16:33

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())
    }
  }

Angular mat-table Sticky Column overlaps when Scrolled

2 Answers2