how to make cdk virtual scroll render items of the table

Question

I'm using CDK VIRTUAL SCROLL in a table that loads a service (API) that returns me a list, with this list I can remove or return their columns respectively as well as their items, but when I remove all columns from the table and requested to return, just the columns ending up coming back normally but their items don't!

Answer 1

you can to have some like

<table>
  <cdk-virtual-scroll-viewport #scroller itemSize="6" class="content">
    <ng-container *cdkVirtualFor="let item of items; let i = index">
      <thead *ngIf="!i">
        <tr>
          <td>Prop1</td>
          <td>Prop2</td>
        </tr>
      </thead>
      <tr>
        <td style="min-width:10rem">
          {{ item.prop1 }}
        </td>
        <td style="min-width:10rem">{{ item.prop1 }}</td>
      </tr>
    </ng-container>
  </cdk-virtual-scroll-viewport>
</table>

With a "typical" cdkscroll

ngOnInit()
  {
    this.fetchMore();
    this.scroller.elementScrolled().pipe(
      map(() => this.scroller.measureScrollOffset('bottom')),
      pairwise(),
      filter(([y1, y2]) => (y2 < y1 && y2 < 140)),
      throttleTime(200)
    ).subscribe(() => {
      this.ngZone.run(() => {
        this.fetchMore();
      })
    }
    );
  }
  fetchMore(): void {
    const newItems="......."
    this.items=[...this.items,...newItems]
  }

see a little stackblitz