mat-vs-table

Quick links

StackBlitz Template

MatTable with Virtual scroll support

add support for virtual scrolling in angular mat-table

Dependencies

• mat-vs-table@10.0.0 Angular (requires Angular 10 or higher)

• mat-vs-table@8.0.0 Angular (requires Angular 8 or 9)

• mat-vs-table@0.1.1 Angular (requires Angular 7)

Installation

Install above dependencies via npm.

Now install mat-vs-table via:

npm install --save mat-vs-table

---

Once installed you need to import the main module:

import { MatVsTableModule } from 'mat-vs-table';

import { MatVsTableModule } from 'mat-vs-table';
 
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatVsTableModule,
    MatTableModule,
    MatSortModule,
    BrowserAnimationsModule,
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

<cdk-virtual-scroll-viewport class="demo-viewport demo-table-container" itemSize="48">
 
  <table mat-vs-table [dataSource]="matTableDataSource" matSort>
 
    <!-- Column definitions -->
    
    <tr mat-header-row *matHeaderRowDef="matTableDataSourceColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: matTableDataSourceColumns;"></tr>
  </table>
 
</cdk-virtual-scroll-viewport>