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.
Leave a Reply