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

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:

    
    ...
    

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