Dealing with an angular material table that contains millions of records can be quite challenging. I have implemented pagination with various options such as 10, 25, 50, 100, 500, and 1000 items per page. However, when selecting the option for 1000 or all records, there is a noticeable delay in updating the pagination interface and loading new data while scrolling through the table.
To address this issue and improve performance, I decided to implement CDK virtual scroll for the table. After adding the virtual scroll functionality, I encountered a problem where the table was not loading properly. Below is a snippet of the code:
<cdk-virtual-scroll-viewport itemSize="50">
<table mat-table fixedLayout [dataSource]="dataSource" multiTemplateDataRows matSort (matSortChange)="sortData($event)" #sort="matSort" matSortStart="desc">
<ng-container *ngFor="let column of columns;" [matColumnDef]="column.columnDef">
<ng-container>
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.header}} </th>
<td mat-cell *matCellDef="let element">
{{element[column.columnDef]}}
</td>
</ng-container>
................
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No records found.</td>
</tr>
</table>
</cdk-virtual-scroll-viewport>
<mat-paginator #paginator="matPaginator" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons (page)="onPaginateChange($event)">
</mat-paginator>Even after attempting to replace *ngFor with *cdkVirtualFor, the issue persisted. Any guidance or assistance on resolving this matter would be greatly appreciated.
Thank you.