Virtual Scroll for Angular Material Table

An Angular Directive, which allow to use virtual scrolling in mat-table

Table of Contents

• Live Demo
• Installation
• Usage
• Development
• Issues

Installation

NPM

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

Usage

Import TableVirtualScrollModule

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

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

Configure the table

Data Source

The TableVirtualScrollDataSource extends the MatTableDataSource and must be used as the data source for the mat-table

Note: without TableVirtualScrollDataSource the directive won't work

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

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

  dataSource = new TableVirtualScrollDataSource();

}

Directive

The tvsItemSize directive makes the magic

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

Make sure, you set the height to the <cdk-virtual-scroll-viewport> container

Also, you can provide additional properties:

tvsItemSize -> the row height in px (default: 48)

headerHeight -> the header row height in px (default: 56)

bufferMultiplier -> the size of rendered buffer. The bufferMultiplier * visibleRowsCount number of rows will be rendered before and after visible part of the table.

Development

This project uses Angular CLI to build the package.

$ npm run build:lib ng-table-virtual-scroll

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue.