Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental

Question

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.

Versions

1. "@angular/material": "^6.2.0"
2. @angular/cdk": "^6.2.0"
3. @angular/cdk-experimental": "^6.2.1"
4. "@angular/core": "6.0.3"
5. "@angular/cli": "6.0.7"

Paperhanger

+1 for this, I am facing the same issue, otherwise i will have to change the entire project to operate with a simple div *cdkVirtualFor – Sushi

But I prefer Angular Material Table – Paperhanger

Is this supported yet? – Reify

@IgnacioBustos See this sample code: stackblitz.com/edit/nahgrin-virtual-scroll-table – Paperhanger

Answer 1

It's not supported yet. But some people have tried to do some POC's. Here is one https://github.com/angular/material2/issues/10122#issuecomment-440442656 .

Also in this issue there is discussion about virtual scrolling and how the above POC works.

Masson

Answer 2

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

1. It implements CollectionViewer (code)

2. It accepts (works with) DataSource instance (code)

With this in mind, let's look at the CdkTable

1. It implements CollectionViewer (code)

2. It accepts (works with) DataSource instance (code)

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.

Ibrahim

Answer 3

I made a custom directive, what can solve this problem:

1) install a package: $ npm install -save ng-table-virtual-scroll and add it to imports:

import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';

@NgModule({
  imports: [
    // ...
    TableVirtualScrollModule
  ]
})
export class AppModule { }

2) use the custom DataSource from the package:

import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';

@Component({...})
export class MyComponent {

  dataSource = new TableVirtualScrollDataSource();

}

3) use the directive on viewport container:

<cdk-virtual-scroll-viewport tvsItemSize style="height: 400px;">
    <table mat-table [dataSource]="dataSource">
    ...
    </table>
</cdk-virtual-scroll-viewport>

The directive allows you to use all features of mat-table, such as sort, pagination, sticky header/column, etc

Afternoons

How do you repopulate mat-table? This is not updating table... this.dataSource= new TableVirtualScrollDataSource(this.tasksNotPlanned); – Stern

I tried this, data source sets data with dataSource = new TableVirtualScrollDataSource('someData'); But this doesn't render rows in UI – Stradivari