Virtual Scroll For Angular Material Table

Author: diprokon
Official Page: Go to website
Publish Date: February 19, 2020
License: MIT


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 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">{{}}</td>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{}}</td>

3. The JavaScript:

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


Virtual Scroll For Angular Material Table

You Might Be Interested In:

Add Comment