Virtual Scroll for Angular Material Table

An Angular Directive, which allow to use virtual scrolling in mat-table

!Travis (.org) branch

Table of Contents

- Live Demo
- Installation
- Usage
- Development
- Issues

Installation

NPM

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

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 and mat-table before. TableVirtualScroll only make work them together properly

$3

#### 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

`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.

Development

This project uses Angular CLI to build the package.

`bash
$ 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.