Angular Material 14 - Load More Rows as You Scroll Table with Virtual Scrolling

Angular Material is a popular UI library for building Angular applications. One of the components it provides is the table, which allows you to display data in a tabular format.

In this tutorial, we will be building an Angular Material table that loads more rows as the user scrolls, using a technique called virtual scrolling.

Step 1: Setting up the project

First, we need to set up a new Angular project. If you don’t have the Angular CLI installed, you can install it by running the following command:

npm install -g @angular/cli

Then, create a new Angular project by running the following command:

ng new my-project

Step 2: Installing Angular Material

Next, we need to install Angular Material and its dependencies by running the following command:

ng add @angular/material

This will install the necessary packages, as well as add some basic configuration to your project.

Step 3: Creating the table component

Now we will create a new component for our table. To do this, run the following command:

ng generate component table

This will create a new folder called table in the src/app directory, with the following files:

table.component.ts
table.component.html
table.component.css
table.component.spec.ts

Step 4: Generating sample data

Instead of using a data file, we can generate sample data of 300 rows using a loop in the table.component.ts file.

We can add the following code in the table.component.ts file:

export class TableComponent implements OnInit {
    data = [];
    displayedColumns = ['id', 'name', 'desc'];

    constructor(private viewport: CdkVirtualScrollViewport) {
        for(let i = 1; i <= 300; i++) {
            this.data.push({
                id: i,
                name: 'Item ' + i,
                desc: 'Description ' + i
            });
        }
    }

    ngOnInit() {
        this.viewport.scrollToIndex(0);
    }
}

In this code, we first created an empty array called data which will be used to store the sample data. Inside the constructor, we used a for loop to generate 300 rows of data and push them into the data array. We added properties to each row such as id, name, and desc, which will correspond to the columns of the table.

Step 5: Adding virtual scrolling

We will now add virtual scrolling to our table by using the cdk-virtual-scroll-viewport directive. This directive can be added to any element and it will turn it into a virtual scrolling container.

In the table.component.html file, we can add the following code

<cdk-virtual-scroll-viewport class="example-viewport" itemSize="50">
    <table mat-table [dataSource]="data" class="mat-elevation-z8">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> ID </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>

        <ng-container matColumnDef="desc">
            <th mat-header-cell *matHeaderCellDef> Description </th>
            <td mat-cell *matCellDef="let element"> {{element.desc}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</cdk-virtual-scroll-viewport>

The cdk-virtual-scroll-viewport directive wraps the table element and the itemSize input is set to 50, which represents the height of each row in pixels.

The mat-table directive is used to create the table and the dataSource input is set to the data array.

The matColumnDef, matHeaderCell, matCell, matHeaderRow, and matRow directives are used to create the columns and rows of the table.

Step 6: Adding styles

We can add some basic styles to the table.component.css file, like this:

table {
    width: 100%;
}

.example-viewport {
    height: 200px;
    width: 100%;
    overflow: auto;
}

This will set the width of the table to 100% and the height of the virtual scrolling container to 200 pixels.

Step 7: Adding the component to the app module

We need to add the TableComponent to the app.module.ts file in the declarations array.

import { TableComponent } from './table/table.component';

@NgModule({
  declarations: [
    AppComponent,
    TableComponent
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 8: Adding the component to the app component

We need to add the TableComponent to the app.component.html file so it will be rendered when the application starts.

<app-table></app-table>

Step 9: Updating the TableComponent

Finally, the table component will have the following code in it:

import { Component, OnInit } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
    data = [];
    displayedColumns = ['id', 'name', 'desc'];

    constructor(private viewport: CdkVirtualScrollViewport) {
        for(let i = 1; i <= 300; i++) {
            this.data.push({
                id: i,
                name: 'Item ' + i,
                desc: 'Description ' + i
            });
        }
    }

    ngOnInit() {
        this.viewport.scrollToIndex(0);
    }
}

Conclusion

In this tutorial, we have learned how to create an Angular Material table with virtual scrolling using the cdk-virtual-scroll-viewport directive. This feature is particularly useful for large datasets, as it allows the table to load more rows as the user scrolls, making it more efficient and user-friendly.

Other uses

Virtual scrolling can also be used in other UI elements such as lists, drop-downs, etc. In addition, it can also be used in conjunction with other features such as pagination and filtering to create a more powerful and efficient UI.

Category: Angular