ng-table-virtual-scroll

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

<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

Development

This project uses Angular CLI to build the package.

$ ng build ng-table-virtual-scroll --prod

Issues

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