Angular JS Material Mat Table Vertical Scroll Plugin

Virtual scroll for a material table is an angular directive, which allows the use of default scrolling in the mat table component.

angular material table scroll vertical, angular material scrollbar style, mat table scroll to row, mat table vertical scroll stackblitz, angular material table virtual scroll

How to make use of it:

1. Install and import the routing.

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

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

2. In HTML:

<cdk-virtual-scroll-viewport tvsItemSize
                             class="wrapper mat-elevation-z2">
  <table mat-table [dataSource]="dataSource">
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{element.id}}</td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{element.name}}</td>
    </ng-container>
  </table>
</cdk-virtual-scroll-viewport>

3. JavaScript:

const DATA = getData(1000);
@Component({
  selector: 'app-base-example',
  templateUrl: './base-example.component.html',
  styleUrls: ['./base-example.component.css']
})
export class BaseExampleComponent {
  displayedColumns = ['id', 'name'];
  dataSource = new TableVirtualScrollDataSource(DATA);
}

Virtual Scroll For Angular Material Table Plugin/Github, angular scrollable table with fixed header

See Demo And Download

Official Website(diprokon): Click Here

This superior jQuery/javascript plugin is developed by diprokon. For extra Advanced usage, please go to the official website.