In this article we will show Angular Material Table with Example. Angular Material provides mat-table component to show material design styled data-table that can be used to display rows of data.
We will see how to show/display data using Angular Material Table. We’ll see step by step creating complete project to display data using Angular material table.
Table of Contents
Create Angular Project
Create angular project by running the following command:
ng new angular-material-table-example
Install Angular Material
In this section, I’ll show you how to set up Angular project to use Angular Material.
Now we will install angular material using Angular schematics.
ng add @angular/material
The ng add
command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and will ask few questions to include few features.
Import Angular Material Modules
mat-table is part of angular MatTableModule. so we need to import that module first.
We will import Angular material MatTableModule in app.module.ts as shown below. Now we can use Angular mat-table in our application.
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { TableBasicExample } from './table-basic-example';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@NgModule({
declarations: [TableBasicExample],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatProgressSpinnerModule
],
providers: [],
bootstrap: [TableBasicExample],
})
export class AppModule {}
Here is a brief intro of the contents of each Material module:
- MatTableModule: MatTableModule is the core data table module, which includes the
mat-table
component and other related components and directives - MatPaginatorModule: MatPaginatorModule is a generic pagination module, that can be used to paginate data in general. It can also be used separately from the Data table, for example for implementing Detail pagination logic in a Master-Detail setup
- MatSortModule: MatSortModule is an optional module which allows adding sortable headers to a data table.
- MatProgressSpinnerModule: MatProgressSpinnerModule module includes the progress spinner indicator component that we will be using to indicate that data is being loaded from the backend
Create Angular Component
Now we will create angular component to show the angular material table
Run the following command to create new angular component.
ng new table-basic-example
Create Interface and JSON data to show in table
Create student interface
export interface Student {
firstName:string;
lastName:string;
email:string;
course:string;
}
and now we will create json array
var STUDENT_DATA=[
{
"firstName": "John",
"lastName": "Smith",
"email": "johnsmith@test.com",
"course": "Software Engineering"
},
{
"firstName": "Robert",
"lastName": "Downey ",
"email": "rober@test.com",
"course": "Computer Science"
}
];
Now our component will looks like this:
src/table-basic-example/table-basic-example.ts
import {Component} from '@angular/core';
export interface Student{
firstName:string;
lastName:string;
email:string;
course:string;
}
const STUDENT_DATA: Student[] = [
{
"firstName": "John",
"lastName": "Smith",
"email": "johnsmith@test.com",
"course": "Software Engineering"
},
{
"firstName": "Robert",
"lastName": "Downey ",
"email": "rober@test.com",
"course": "Computer Science"
}
]
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string[] = ['firstName', 'lastName', 'email', 'course'];
dataSource = STUDENT_DATA;
}
Bind data source to mat-table
Now we will bind dataSource with our mat-table as following:
<table mat-table>
...
</table>
Material Data Table Column Definitions
We need to define the column templates for the given table.
A column template should have
- Column Unique name
- Header name
- Column data
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef> First Name </th>
<td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
</ng-container>
matColumnDef
is used to define the column name and it should be unique.
matHeaderCellDef
defines the corresponding header name for the column.
It’s not necessary that object property should be equal to the column header.
matCellDef
represent the row data for the given column name.
Our student object contains 4 properties, for each property we need to create the corresponding column templates.
At the end,Our template file will look like this:
src/table-basic-example/table-basic-example.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef> First Name </th>
<td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef> Last Name </th>
<td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email</th>
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
</ng-container>
<ng-container matColumnDef="course">
<th mat-header-cell *matHeaderCellDef> Course</th>
<td mat-cell *matCellDef="let element"> {{element.course}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
and that’s it we have create angular material table.
I hope you like this article.
Read also:
Angular Email Validation in Reactive Form with Example
Angular Email Validation in Template-Driven Form with Example
Angular Material Grid Layout Example