Filter Table Data With Sorting Column in Angular Using Angular Material

In this article, we’ll learn how to create filter table data and sorting of the column in ascending and descending. In the last article, we discuss on crate dynamic tabs in angular.
To start implementing first, we need to install the angular material module in our application run the below command to install the module.


npm i @angular/material

After installing the module lets add a module in our app.module.ts file. We need to import some modules to use our application called MatSortModule, MatTableModule display in the below code.


......
import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';

.......
@NgModule({
imports:[ 
..., 
MatInputModule,
MatTableModule,
MatSortModule,
...,   
],
....
})



After adding a module in the app.module file we can use it in our component to darw the filter table. Let’s create app.component.ts file to assign some table values and function for filter.


.............................
//Import for the sorting. 
import {MatSort} from '@angular/material/sort';
......
//
@ViewChild(MatSort) sort: MatSort;

//srt function to display data to sort.
ngAfterViewInit() {
    this.dataSource.sort = this.sort;
}

//In HTML table tag we need to pass the matSort directive.
<table mat-table <strong>matSort</strong> [dataSource]="dataSource" class="mat-elevation-z8">

//Table column we need to pass the "mat-sort-header" to apply sorting on the column.
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

Display below is the code for the app.component.ts ,app.component.html


import {Component,ViewChild,AfterViewInit} from '@angular/core';
import {MatSort} from '@angular/material/sort';

import {MatTableDataSource} from '@angular/material/table';

export interface UserData {
  name: string;
  position: number;
  phone: number;
  email: string;
}

const ELEMENT_DATA: UserData[] = [
  {position: 1, name: 'Mahesh', phone: 8585747, email: 'Hmahesh@wwe.com'},
  {position: 2, name: 'Ramesh', phone: 855588, email: 'rames@wei.com'},
  {position: 3, name: 'Rahul', phone: 99696, email: 'newi@ssw.com'},
  {position: 4, name: 'Minu', phone: 965555, email: 'nieue@ww.com'},
  {position: 5, name: 'Mishu', phone: 9125477, email: 'mishu@wa.com'},
  {position: 6, name: 'Mayank', phone: 914755, email: 'mayku@wido.com'},
  {position: 7, name: 'Hiren', phone: 9425658, email: 'hortet@wwi.com'},
  {position: 8, name: 'Alex', phone: 985224, email: 'fheuuw@ww.com'},
  {position: 9, name: 'Joy', phone: 963544, email: 'itituyd@ww.com'},
  {position: 10, name: 'Ashok', phone: 854444, email: 'jeje@woodd.com'},
];

/**
 * @title Table with filtering
 */
@Component({
   selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  displayedColumns: string[] = ['position', 'name', 'phone', 'email'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

   @ViewChild(MatSort) sort: MatSort;


  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
}



<h2>Filter Table Data With Sorting Column</h2>

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. search" #input>
</mat-form-field>

<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Phone </th>
    <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>


<!-- Copyright 2020 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->




Output

Below is the full embeded code for the filter table data with sorting column using angular material you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 2
  • 2
  •  
  •