ng-table-virtual-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.8 • Public • Published

    Virtual Scroll for Angular Material Table

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

    npm npm Travis (.org) branch npm

    Table of Contents

    Installation

    NPM

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

    Usage

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

    Install

    npm i ng-table-virtual-scroll

    DownloadsWeekly Downloads

    7,914

    Version

    1.3.8

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    21

    Last publish

    Collaborators

    • diprokon