CDK Virtual Scroll for Angular Material Table not working

Question

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 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>

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

Thank you.

score 0 · Answer 1 · answered Oct 13 '22 at 08:52

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 class="mat-row" *matNoDataRow>
                    <td class="mat-cell" colspan="4">No records found.</td>
                </tr>
            </table>
        </cdk-virtual-scroll-viewport>

thank you it's working now but the existing pagination options are not displaying after this change — Shinchan, Oct 13 '22 at 09:15
It should be there. Inspect the browser and select inspect element. Then search for the pagination options. — Kibé M.C, Oct 13 '22 at 09:26
as itemSize is added, it's by default showing only 50records per page, and option to change pagination is not displaying, any way to enable it? — Shinchan, Oct 13 '22 at 09:38
This answer is not related to virtual rendering of records. You are virtually instantiating columns, but this does not resolve problem with slow rendering of 'millions of records'. — Edmunds Folkmanis, Oct 13 '22 at 10:43

Edmunds Folkmanis · Answer 2 · 2022-10-13T10:45:31.593

0

mat-table does not render rows with virtual scroll (yet). But you can build basic <table> inside <cdk-virtual-scroll-viewport> with <tr *cdkVirtualFor> and style it according to Material concept.

edited Oct 13 '22 at 10:45

answered Oct 13 '22 at 10:39

Edmunds Folkmanis

512
1
9

that is what I'm doing right, having mat-table inside cdk-virtual-scroll-viewport – Shinchan Oct 13 '22 at 11:59
how can I improve performance for rendering on pagination options change? – Shinchan Oct 13 '22 at 13:27
mat-table does not work with cdk-virtual-scroll but generic html will. There is a feature request in github https://github.com/angular/components/issues/10122 with some workarounds that can be usable in some cases.
– Edmunds Folkmanis Oct 14 '22 at 06:22
Fetching from server and buffering of millions of records will be slow anyway. May be loading in chunks with pagination is better idea. – Edmunds Folkmanis Oct 14 '22 at 06:27

CDK Virtual Scroll for Angular Material Table not working

2 Answers2