ANGULAR 8 Tutorials

mat-table example in angular 8

Normally data table is used to bind backend data to front end UI.Here i am going to use MatTableDatasource to bind data from database.The Mattable consists of most common features like filtering,pagination and sorting.Here in this article i am going to explain how to display data in Angular 8 page using mat table.


Prerequisite:


Angular material should be preloaded in your angular project.Please see here to

Install Angular material in Angular 8

Let us see the simple mat-table example in angular 8, so that you can understand better!

Code to include only Mattable:-

App.component.html

 <div class="mat-elevation-z8" style="border:1px solid black;width:500px">
<table mat-table [dataSource]="patientdatasource" matSort style="width:500px">    
    <ng-container matColumnDef="patientname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Patientname <th>
    <td mat-cell *matCellDef="let element"> {{element.patientname}} <td>
      
<ng-container>
    <ng-container matColumnDef="gender">
    <th mat-header-cell *matHeaderCellDef> gender <th>
    <td mat-cell *matCellDef="let element"> {{element.gender}} <td>
<ng-container>
    <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> age <th>
    <td mat-cell *matCellDef="let element"> {{element.age}} <td>
<ng-container>
    <ng-container matColumnDef="dob">
    <th mat-header-cell *matHeaderCellDef> dob <th>
    <td mat-cell *matCellDef="let element"> {{element.dob}} <td>
<ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"><tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
<tr>      
<table>
<div>

App.component.ts

import { Component } from '@angular/core';
import {MatTableDataSource} from '@angular/material'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})
export class AppComponent implements AfterViewInit {
  title = 'Angular8Examples';
  displayedColumns: string[] = ['patientname', 'gender', 'age', 'dob'];
  patientdatasource = new MatTableDataSource(patientdata);  
  constructor(){ }  
}
export interface patientdetails {
  patientname: string;
  gender: string;
  age: number;
  dob: string;
}
const patientdata:patientdetails[]=[
{patientname:'john', gender:'Male',age:23,dob:'28/10/1990'},
{patientname:'mary', gender:'Female',age:23,dob:'18/02/1980'},
{patientname:'raj', gender:'Male',age:23,dob:'07/05/2000'},
{patientname:'manikam', gender:'Female',age:13,dob:'03/03/2001'},
{patientname:'charlie', gender:'Female',age:33,dob:'14/11/2001'},
{patientname:'lucie', gender:'Female',age:53,dob:'30/10/2001'},
{patientname:'dron', gender:'Female',age:43,dob:'05/09/2001'},
{patientname:'druv', gender:'male',age:26,dob:'20/07/2001'},
{patientname:'vikram', gender:'male',age:38,dob:'04/03/1987'},
{patientname:'chiyan', gender:'male',age:42,dob:'05/06/1980'},
{patientname:'samudra', gender:'male',age:72,dob:'13/08/1950'},
]

Code to include Pagination in Mattable:-

App.component.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator} from '@angular/material'
export class AppComponent implements AfterViewInit {
displayedColumns: string[] = ['patientname', 'gender', 'age', 'dob'];
patientdatasource = new MatTableDataSource(patientdata);
@ViewChild(MatPaginator,null) myfirstpaginator:MatPaginator;  
ngAfterViewInit()
{
this.patientdatasource.paginator=this.myfirstpaginator;
this.patientdatasource.sort=this.myfirstsort;
}

App.component.html

<div class="mat-elevation-z8" style="border:1px solid black;width:500px">
<table mat-table [dataSource]="patientdatasource" matSort style="width:500px">
        <ng-container matColumnDef="patientname">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Patientname <th>
        <td mat-cell *matCellDef="let element"> {{element.patientname}} <td>      
<ng-container>
<table>
<div>

<div style="float:left">
        <mat-paginator [length]="5" [pageSize]="5" [pageSizeOptions]="[5,10,15]"><mat-paginator>
<div>

Code to include Sorting in Mattable:-

App.component.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator,MatSort} from '@angular/material'
export class AppComponent implements AfterViewInit {
displayedColumns: string[] = ['patientname', 'gender', 'age', 'dob'];
patientdatasource = new MatTableDataSource(patientdata);
@ViewChild(MatSort,null) myfirstsort:MatSort;
ngAfterViewInit()
{
this.patientdatasource.sort=this.myfirstsort;
}

App.component.html

<table mat-table [dataSource]="patientdatasource" matSort style="width:500px">    
<ng-container matColumnDef="patientname"<
<th mat-header-cell *matHeaderCellDef mat-sort-header< Patientname <th>
<td mat-cell *matCellDef="let element"< {{element.patientname}} <td>
      
<ng-container>
<table>

Code to include Filter in Mattable:-

App.component.ts

export class AppComponent implements AfterViewInit {                      
applyFilter(filtervalue:string)
{
  this.patientdatasource.filter= filtervalue;
}
}

App.component.html 

<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="enter filter value">
<mat-form-field>