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

Frutas Luna · Accepted Answer · 2019-09-21 20:09:39Z

2

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.

answered Sep 21, 2019 at 20:09

Frutas Luna

744 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dilrukshika Rajapakshe · Accepted Answer · 2019-09-24 08:47:35Z

<!-- 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

Đỗ văn Thắng · Accepted Answer · 2019-09-24 09:39:17Z

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>

Collectives™ on Stack Overflow

Angular Data table with sorting, pagination, and filtering

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related