Virtual Scroll For Angular Material Table

Description:

An Angular directive that enables the virtual scrolling experience on the Angular Material Table component.

How To Use It:

1. Install and import the directive.

# NPM
$ npm install ng-table-virtual-scroll --save

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

2. In the HTML:

<cdk-virtual-scroll-viewport tvsItemSize
                             class="wrapper mat-elevation-z2">
  <table mat-table [dataSource]="dataSource">
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{element.id}}</td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{element.name}}</td>
    </ng-container>
  </table>
</cdk-virtual-scroll-viewport>

3. The JavaScript:

const DATA = getData(1000);
@Component({
  selector: 'app-base-example',
  templateUrl: './base-example.component.html',
  styleUrls: ['./base-example.component.css']
})
export class BaseExampleComponent {
  displayedColumns = ['id', 'name'];
  dataSource = new TableVirtualScrollDataSource(DATA);
}

Preview: