Breaking News: Grepper is joining You.com. Read the official announcement!

angular dynamic table with filter and pagination

syn answered on September 8, 2022 Popularity 4/10 Helpfulness 1/10

answer angular dynamic table with filter and pagination

angular dynamic table with filter and pagination

Comment

<div class="mat-elevation-z8">
    
      <mat-form-field class="filter" appearance="standard">
        <mat-label>Ara..</mat-label>
        <input matInput (keyup)="applyFilter($event)" #input>
      </mat-form-field>
    
    <table mat-table [dataSource]="dataSource">     
      
      
      <ng-container matColumnDef="tedarikci_adi">
        <th class="bold" mat-header-cell *matHeaderCellDef> Tedarikçi Adı </th>
        <td mat-cell *matCellDef="let element"> {{element.tedarikci_adi}} </td>
      </ng-container>
      <ng-container matColumnDef="kiyafet_adi">
        <th class="bold" mat-header-cell *matHeaderCellDef> Kıyafet Adı </th>
        <td mat-cell *matCellDef="let element"> {{element.kiyafet_adi}} </td>
      </ng-container>
  
      <ng-container matColumnDef="adet">
        <th class="bold" mat-header-cell *matHeaderCellDef> Adet </th>
        <td mat-cell *matCellDef="let element"> {{element.adet}} </td>
      </ng-container>
  
      <ng-container matColumnDef="beden">
        <th class="bold" mat-header-cell *matHeaderCellDef> Beden </th>
        <td mat-cell *matCellDef="let element"> {{element.beden}} </td>
      </ng-container>

      <ng-container matColumnDef="siparis_tarihi">
        <th class="bold" mat-header-cell *matHeaderCellDef> Sipariş Tarihi </th>
        <td mat-cell *matCellDef="let element"> {{element.siparis_tarihi|date:"shortDate"}} </td>
      </ng-container>
      <ng-container matColumnDef="sezon">
        <th class="bold" mat-header-cell *matHeaderCellDef> Sezon </th>
        <td mat-cell *matCellDef="let element"> {{element.sezon}} </td>
      </ng-container>
      <ng-container matColumnDef="ozellik">
        <th class="bold" mat-header-cell *matHeaderCellDef> Özellik </th>
        <td mat-cell *matCellDef="let element"> {{element.ozellik}} </td>
      </ng-container>
      <ng-container matColumnDef="birim">
        <th class="bold" mat-header-cell *matHeaderCellDef> Birim </th>
        <td mat-cell *matCellDef="let element"> {{element.birim}} </td>
      </ng-container>
      <ng-container matColumnDef="fiyat">
        <th class="bold" mat-header-cell *matHeaderCellDef> Fiyat </th>
        <td mat-cell *matCellDef="let element"> {{element.fiyat}} </td>
      </ng-container>
      <ng-container matColumnDef="para_birimi">
        <th class="bold" mat-header-cell *matHeaderCellDef> Para Birimi </th>
        <td mat-cell *matCellDef="let element"> {{element.para_birimi}} </td>
      </ng-container>
      <ng-container matColumnDef="kur">
        <th class="bold" mat-header-cell *matHeaderCellDef> Kur </th>
        <td mat-cell *matCellDef="let element"> {{element.kur}} </td>
      </ng-container>
      <ng-container matColumnDef="tl_fiyat">
        <th class="bold" mat-header-cell *matHeaderCellDef> Tl Fiyat </th>
        <td mat-cell *matCellDef="let element"> {{element.tl_fiyat}} </td>
      </ng-container>
      <ng-container matColumnDef="durum">
        <th class=" bold" mat-header-cell *matHeaderCellDef> Durum </th>
        <td mat-cell *matCellDef="let element"> {{element.durum}} </td>
      </ng-container>
      <ng-container class=" bold" matColumnDef="Guncelle">
        <th class="a bold w" mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let element"> <button style="background-color:rgb(68, 70, 70);" mat-mini-fab color="primary" aria-label="Example icon button with a delete icon" (click)="openDialog2(element)" >
          <mat-icon>edit</mat-icon>
        </button>
      </td>
      </ng-container>
      <ng-container class="bold" matColumnDef="Sil">
        <th class="w" mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element"><button mat-mini-fab color="warn" aria-label="Example icon button with a delete icon" (click)="deleteOrder(element.siparis_id)">
          <mat-icon>delete</mat-icon>
        </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[10]"
                   showFirstLastButtons 
                   aria-label="Select page of periodic elements">
    </mat-paginator>
  </div>

<!-- TS FILE -->
  @ViewChild(MatPaginator) paginator!: MatPaginator;

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

Popularity 4/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: angular dynamic filter html pagination

Link to this answer
Share Copy Link

Contributed on Sep 08 2022

syn

0 Answers Avg Quality 2/10

angular dynamic table with filter and pagination

Contents

More Related Answers

angular dynamic table with filter and pagination

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.