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

Answer 1

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.

Answer 2

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.

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