Table not refreshing rendered rows when scrolled

[yusufakyol2597pc]

In angular 16.1.4, the demo example is not working. When I scroll down, some little movements appear in the table but table does not render the needed rows. Let's say I have 1000 rows, it always shows first n (e.g 10) rows. This could be the angular material tab's change detection mechanism due to performance considerations.

Note: I have found a little workaround for this by calling detectChanges method from ChangeDetectorRef of the component whenever scroll index is changed.

[MansurIsakov]

Note: I have found a little workaround for this by calling detectChanges method from ChangeDetectorRef of the component whenever scroll index is changed.

Hey, having the same issue, where can i get scroll index? @yusufakyol2597pc

and can u show your fix?

[yusufakyol2597pc]

@MansurIsakov
In component's script:
Add ChangeDetectorRef in your constructor:

constructor(private readonly changeDetectorRefs: ChangeDetectorRef) { }

Then add a method, such as:

onScrolledIndexChanged(index: number): void {
    const fixedIndex: number = parseInt(index.toFixed(), 10); // this is needed, I don't know why but index was a float in my case
    console.log("scroll index", fixedIndex);
    this.changeDetectorRefs.detectChanges();
  }

fixedIndex will be the scrolled index. detectChanges() call will detect the changes and fix the not rendering problem as a workaround.

Finally, in component's html template, give this method to the event of the cdk-virtual-scroll-viewport called scrolledIndexChange like:

<cdk-virtual-scroll-viewport
  class="scroll-container"
  (scrolledIndexChange)="onScrolledIndexChanged($event)"
></cdk-virtual-scroll-viewport>