CDK Virtual Scroll for Angular Material Table not working-CodePudding

I have an angular material table that has millions of records, I have added pagination which has options like 10, 25, 50, 100, 500, and 1000, and the max length of the records, which I select 1000 or max records option, there's a delay in the change of options in pagination also when I scroll the table, there's a second delay in loading data to the table on scroll. To make the scroll smooth & records load faster, I thought of having a CDK virtual scroll for the table.

I have added the scroll, but the table is not loading, below is my 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  *matNoDataRow>
                    <td  colspan="4">No records found.</td>
                </tr>
            </table>
        </cdk-virtual-scroll-viewport>
        <mat-paginator #paginator="matPaginator" [pageSizeOptions]="pageSizeOptions"
            showFirstLastButtons (page)="onPaginateChange($event)">
        </mat-paginator>

I have tried replacing *ngFor with *cdkVirtualFor which isn't working too. Any help is much appreciated.

Thank you.

CodePudding user response：

You have not added the height and use *cdkVirtualFor instead of *ngFor

<cdk-virtual-scroll-viewport itemSize="50" style="height:500px;">
            <table mat-table fixedLayout [dataSource]="dataSource" multiTemplateDataRows matSort
                (matSortChange)="sortData($event)" #sort="matSort" matSortStart="desc">
                <ng-container *cdkVirtualFor="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  *matNoDataRow>
                    <td  colspan="4">No records found.</td>
                </tr>
            </table>
        </cdk-virtual-scroll-viewport>

CodePudding user response：

mat-table does not render rows with virtual scroll (yet). But you can build simple with *cdkVirtualFor and style it according to Material concept.