Forked
Origin Library was forked and this package was published because we needed this PR: https://github.com/diprokon/ng-table-virtual-scroll/pull/66
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 import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';
@NgModule({
imports: [
// ...
TableVirtualScrollModule
]
})
export class AppModule { }
Note: you need to install and configure virtual scrolling and mat-table before. TableVirtualScroll only make them work 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
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="48" headerHeight="56" 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)
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.