Angular material mat-table with sticky column issue with long text in column

Question

Angular mat table sticky column functionality is not working properly when row selection checkbox column is added, getting some additional space between checkbox column and next column. And also while doing horizontal scrolling the UI is distorted.

Please help

Answer 1

After trying so many different options I found the root cause and do a work around. For me mat table was inside a *ngIf condition so I have to do like below, otherwise the below code inside ngAfterViewInit also should work I think. Please refer github issue - https://github.com/angular/components/issues/15885

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