Angular Material Table example using mat-table

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.


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

  1. Column Unique name
  2. Header name
  3. 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:

Email Validation in Angular

Angular Email Validation in Reactive Form with Example

Angular Email Validation in Template-Driven Form with Example

Angular Material Grid Layout Example

Angular Material Card Example

Angular Material List Example

Top 10 VS Code extensions