Quick links

StackBlitz Template

MatTable with Virtual scroll support

add support for virtual scrolling in angular mat-table

Dependencies

• [email protected] Angular (requires Angular 10 or higher)

• [email protected] Angular (requires Angular 8 or 9)

• [email protected] 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>