Create a Table With Sorting Pagination and Filter Using Angular Material in Ionic

In this App, we are creating a Table With Sorting Pagination and Filter Using Angular Material in Ionic.

Step-1 Firstly Install Nodejs if you did not install Nodejs see my previous post.
       
      https://www.softwarequery.com/2018/06/how-to-install-nodejs-via-command-on.html

Step-2  After Install Nodejs install an Ionic Angular Material open Cmd then Write these Commands.
                     

ionic start devdacticMaterial blank cd devdacticMaterial ng add @angular/material

Step-3 After Install Angular Material then go to app/app.module.ts then copy-paste this code.

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

Step-4. In this Step importing all Modules use the Material Components. Go to app/material.module.ts file then open this file and copy-paste this code.

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

Step-5. In this Step, We are Create a Table with Sorting, Filtering, and Pagination using Angular Material in ionic.  Go to app/home/home.page.ts file then open file copy-paste this code.

import { Component, OnInit, ViewChild } from "@angular/core"; import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material'; @Component({ selector: "app-home", templateUrl: "home.page.html", styleUrls: ["home.page.scss"] }) export class HomePage implements OnInit { displayedColumns: string[] = ['first_name', 'last_name', 'twitter']; dataSource = new MatTableDataSource<any>([ { first_name: 'Saam', last_name: 'smith', twitter: 'max' }, { first_name: 'denny', last_name: 'don', twitter: 'dom' }, { first_name: 'mark' last_name: 'sam', twitter: 'sam' } ]); @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; } }

Step-6. In this step, We are going to app/home/home.page.html file then open file pate a code to implement a front end part of the table.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort> <ng-container matColumnDef="first_name"> <th mat-header-cell *matHeaderCellDef> First Name </th> <td mat-cell *matCellDef="let user"> {{user.first_name}} </td> </ng-container> <ng-container matColumnDef="last_name"> <th mat-header-cell *matHeaderCellDef> Last Name </th> <td mat-cell *matCellDef="let user"> {{user.last_name}} </td> </ng-container> <ng-container matColumnDef="twitter"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Twitter </th> <td mat-cell *matCellDef="let user"> {{user.twitter}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator [pageSizeOptions]="[1, 2, 5]" showFirstLastButtons></mat-paginator>