Virtual Scroll for Angular Material Table
An Angular Directive, which allow to use virtual scrolling in mat-table
Table of Contents
Installation
NPM
$ npm install -save ng-table-virtual-scroll
Usage
TableVirtualScrollModule
Import ;
Note: you need to install and configure virtual scrolling and mat-table before. TableVirtualScroll only make work them together properly
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
;
Directive
The tvsItemSize
directive makes the magic
...
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)
footerHeight
-> the footer row height in px (default: 48)
headerEnabled
-> is the header row in the table (default: true)
footerEnabled
-> is the footer row in the table (default: false)
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.