CODEWITHSUNDEEP
javascriptcssangular-materialangular9mat-table
Renjith P N
Renjith P N

Reputation: 4241

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

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.

enter image description hereAn

Please help

Upvotes: 0

Views: 1345

Answers (1)

Renjith P N
Renjith P N

Reputation: 4241

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

Upvotes: 1

Related Questions