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

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

_Version compatibility_

| Angular version | Library version |
|-----------------|-----------------|
| \>= 15 | latest |
| 13 - 14 | 1.5.* |
| <= 12 | 1.3.* |




Usage

$3

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

@NgModule({
imports: [
// ...
TableVirtualScrollModule
]
})
export class AppModule { }
`
Note: you need to install and configure virtual scrolling (ScrollingModule) and mat-table (MatTableModule) before. TableVirtualScroll only make them work together properly

$3

#### Data Source

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

Note: without TableVirtualScrollDataSource the directive won't work

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

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

dataSource = new TableVirtualScrollDataSource();

}
`

#### Directive
The tvsItemSize directive makes the magic

`html




...


`

Make sure, you set the height to the 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.

#### CdkTable

cdk-table from CdkTableModule is also supported. Just use CdkTableVirtualScrollDataSource` as datasource

Issues

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