I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div
I've found:
<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
<div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>
However, I want to integrate it with Angular Material Table like below
<table mat-table [dataSource]="dataSource">
<ng-container *ngFor="let c of displayedColumns" [matColumnDef]="c">
<th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
<td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
I was wondering how to wrap that cdk-virtual-scroll-viewport
to mat-table
. My table displays up to 1000 rows and more than 20 columns, and the performance is pretty slow while it's loading and scrolling.
PS: I know that it can be solved by using Paginator, but I don't want to do that.
"@angular/material": "^6.2.0"
@angular/cdk": "^6.2.0"
@angular/cdk-experimental": "^6.2.1"
"@angular/core": "6.0.3"
"@angular/cli": "6.0.7"
This is not something that currently exists out of the box. The CdkTable
(or MatTable
) component does not support virtual scroll YET.
The virtual scroll support baked into @angular/cdk
is still in it's experimental phase - this will change in version 7.
However, when this feature lands the next step will be to implement it for the table. I will explain why.
cdk-virtual-scroll-viewport
is a container for the *cdkVirtualFor
directive, if we look into this directive (CdkVirtualForOf
) we can see that
With this in mind, let's look at the CdkTable
The similarity is not by chance, the table (with some adjustments) can be used by cdk-virtual-scroll-viewport
like the cdkVirtualFor
is used.
I'm not sure what the final implementation will be, whether the developer will be able to wrap the table from the outside or the table will set it internally but this is the direction it will be.
If I had to guess I would say that the dev will choose if he wants to wrap the table with a virtual scroll. This is because cdk-virtual-scroll-viewport
does not query for cdkVirtualFor
(via ViewChild
), it is passive and waits for something to attach it. Which is a sign that this was thought of pre-hand.
You can do it right now, by extending CdkTable
and making the adjustments yourself, this will require an understanding of the table internals and might take some time. I suggest waiting a bit.