Angular Data table with sorting, pagination, and filtering

Question

ts file

 import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { MatTableDataSource } from '@angular/material/table';
    import { PersonalDB } from '../personal-db';
    import { Personal } from '../personal';


    @Component({
      selector: 'app-student-table',
      templateUrl: './student-table.component.html',
      styleUrls: ['./student-table.component.css']
    })
    export class StudentTableComponent implements OnInit {

      @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
      @ViewChild(MatSort, { static: true }) sort: MatSort;



      constructor() {

      }

      personal: Personal[] = [
        {
          dates: "2018.2.3",
          image: "../../assets/img/a.jpg",
          id: "1",
          name: "Nadun",
          email: "[email protected]",
          mobile: "0778012319",
        }, {
          dates: "2018.2.13",
          image: "../../assets/img/b.jpg",
          id: "2",
          name: "kmale",
          email: "[email protected]",
          mobile: "0778012319",
        }, {
          dates: "2018.2.23",
          image: "../../assets/img/c.jpg",
          id: "3",
          name: "sunil",
          email: "[email protected]",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.1",
          image: "../../assets/img/d.jpg",
          id: "4",
          name: "Nipun",
          email: "[email protected]",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.6",
          image: "../../assets/img/e.jpg",
          id: "5",
          name: "Kavinga",
          email: "[email protected]",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.14",
          image: "../../assets/img/f.jpg",
          id: "6",
          name: "Ishara",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.25",
          image: "../../assets/img/g.jpg",
          id: "7",
          name: "Dilshan",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.19",
          image: "../../assets/img/h.jpg",
          id: "8",
          name: "Ruvini",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.7",
          image: "../../assets/img/i.jpg",
          id: "9",
          name: "Saduni",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.10",
          image: "../../assets/img/j.jpg",
          id: "10",
          name: "Himaya",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/k.jpg",
          id: "11",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.18",
          image: "../../assets/img/l.jpg",
          id: "12",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/m.jpg",
          id: "13",
          name: "string",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.28",
          image: "../../assets/img/n.jpg",
          id: "14",
          name: "string",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.17",
          image: "../../assets/img/o.jpg",
          id: "15",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.21",
          image: "../../assets/img/p.jpg",
          id: "16",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.11",
          image: "../../assets/img/a.jpg",
          id: "17",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.22",
          image: "../../assets/img/q.jpg",
          id: "18",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/r.jpg",
          id: "19",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.13",
          image: "../../assets/img/s.jpg",
          id: "20",
          name: "string",
          email: "string",
          mobile: "string",
        }

      ];
      displayedColumns = ['dates', 'image', 'id', 'name', 'email', 'mobile'];
      dataSource = new MatTableDataSource(this.personal);

      ngOnInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.data = this.personal;
        console.log(this.personal);
        console.log(this.dataSource);
      }

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
      }

      rowClicked(row: any): void {
        console.log(row);
      }

    }

html page

<mat-form-field>
  <br>
  <small>Search:</small>
  <input matInput (keyup)="applyFilter($event.target.value)">
  <mat-divider style="color: darkgrey"></mat-divider>
</mat-form-field>
<br>
<br>
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <!-- 1 -->
    <ng-container matColumnDef="dates">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> dates </th>
      <td mat-cell *matCellDef="let row"> {{row.dates}} </td>
    </ng-container>

    <!-- 2 -->
    <ng-container matColumnDef="image">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> image </th>
        <td mat-cell *matCellDef="let row"> <img src="{{row.image}}" style="width: 50px; height: 50;"></td>
      </ng-container>

    <!-- 3 -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> id </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

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

    <!-- ID 5 -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> email </th>
      <td mat-cell *matCellDef="let row"> {{row.email}} </td>
    </ng-container>

    <!-- 6 -->
    <ng-container matColumnDef="mobile">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> mobile </th>
      <td mat-cell *matCellDef="let row"> <img src="" style="width: 50px; height: 50;">{{row.mobile}}</td>
    </ng-container>

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

  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

** I don't know what is the problem is but all the value print in one column and also I am using an angular 8 material. I am getting a hard cored arry data in a table. this is first time i am doing an angular project. I haven't proper idea about how to data bind in a table.
**

enter link description here

Answer 1

When I worked with Angular Data table with sorting, pagination, and filtering I had the problem that neither the sort nor the paginator worked when they were within the ngOnInit() cycle, and that happened because at the time the ngOnInit() is executed They were not yet available. For the sort and pagination to work, I recommend passing them to the ngAfterViewInit() cycle.

This means moving the block of code you have in the ngOnInit () to:

ngAfterViewInit(){
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource.data = this.personal;
    console.log(this.personal);
    console.log(this.dataSource);
}

That will give you a better result.

Answer 2

<!-- normal data -->
<br>
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<br>
<br>
<div class="example-container mat-elevation-z8">

  <mat-table *ngIf="dataSource != null" [dataSource]="dataSource" matSort>

    <!-- 1 -->
    <ng-container matColumnDef="joinDate">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Join Date </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.joinDate}}</mat-cell>
    </ng-container>

    <!-- 2 -->
    <ng-container matColumnDef="image">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Image </mat-header-cell>
      <mat-cell *matCellDef="let row"><img src="{{row.image}}" style="width: 25px; height: 25;"></mat-cell>
    </ng-container>

    <!-- 3 -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <!-- 4 -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
    </ng-container>

    <!-- ID 5 -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell  *matCellDef="let row">{{row.email}}</mat-cell>
    </ng-container>

    <!-- 6 -->
    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.mobile}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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


  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

correction - removed all the table, tr and td tag

Answer 3

sorting, pagination width API:

sortData(sort: Sort) {
    if(sort.direction == "asc" || sort.direction == "desc") {
      this.order = [{order: sort.active, type: sort.direction}]
    } else {
      this.order = null;
    }
    ......
  }
  
  pageChangeEvent(event) {
    this.pageIndex = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    ....
  }

<table class="table" mat-table matSort [dataSource]="dataSource" (matSortChange)="sortData($event)">
        

        <!-- Item Price Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> Name </th>
          <td mat-cell *matCellDef="let element">
            <a routerLink="/campaign/edit/{{pageTab}}/{{element.id}}" class="info_title">
              {{(element.name.length>40) ? (element.name | slice:0:40) + '...' : (element.name)}} 
              <span class="btn-draft" *ngIf="element.status == 'C'">Draft</span>
            </a>
            <a routerLink="/campaign/edit/{{pageTab}}/{{element.id}}" class="info_value">        {{element.categoryName}}</a>
          </td>
        </ng-container>  

        <!-- Item Code Column -->
        <ng-container matColumnDef="remainingQuantity">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="remainingQuantity"> Remaining quantity </th>
          <td mat-cell *matCellDef="let element"> {{element.remainingQuantity}} </td>
        </ng-container>
          
        <!-- Item Merchant Column -->
        <ng-container matColumnDef="redemption_end_date">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="redemption_end_date"> End time </th>
          <td mat-cell *matCellDef="let element"> {{element.redemptionEndDate}} </td>
        </ng-container>

        <!-- Item Edit Delete Column -->
        <ng-container matColumnDef="lastModifiedDate">
          <th mat-header-cell *matHeaderCellDef></th>
          <td class="last-edited" mat-cell *matCellDef="let element">last edited on {{element.lastModifiedDate}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator style="display: none;"></mat-paginator>
      <mat-paginator *ngIf="(listCoupon && listCoupon.length>0) || filterValue" style="margin-left: auto; border-top: 1px solid #E7E7E7;" 
        #paginator [length]="totalItems"
        [pageSize]="pageSize"
        [pageIndex]="(pageIndex - 1)"
        [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons (page)="pageChangeEvent($event)">
      </mat-paginator>