An Angular Directive, which allow to use virtual scrolling in mat-table
NPM
$ npm install -save ng-table-virtual-scroll
TableVirtualScrollModule
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 work them together properly
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();
}
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.
This project uses Angular CLI to build the package.
$ npm run build:lib ng-table-virtual-scroll
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
Author: diprokon
Live Demo: https://diprokon.github.io/ng-table-virtual-scroll/#/examples
GitHub: https://github.com/diprokon/ng-table-virtual-scroll
#angular #angularjs #javascript