Eseguire ricerche in una tabella Angular Material

Mattepuffo's logo
Eseguire ricerche in una tabella Angular Material

Eseguire ricerche in una tabella Angular Material

Per un piccolo progetto sto usando Angular Material; nel complesso non è male, ma pecca su alcune rispetto a tool simili.

Una di queste è la ricerca in una mat-table; di default non c'è e dobbiamo impostarla noi.

Ma non è una cosa difficile; cominciamo dalla funzione Typescript:

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

Dove do per scontato che abbiamo già implementato il vostro dataSoource.

Qui sotto il codice nella pagina:

  <mat-form-field appearance="standard">
    <input matInput placeholder="Cerca..." (keyup)="doFilter($event)">
  </mat-form-field>

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

    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>TITOLO</th>
      <td mat-cell *matCellDef="let element">{{element.title}}</td>
    </ng-container>

    <ng-container matColumnDef="author">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>AUTORE</th>
      <td mat-cell *matCellDef="let element">{{element.author}}</td>
    </ng-container>

    <ng-container matColumnDef="editor">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>EDITORE</th>
      <td mat-cell *matCellDef="let element">{{element.editor}}</td>
    </ng-container>

    <ng-container matColumnDef="isbn">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ISBN</th>
      <td mat-cell *matCellDef="let element">{{element.isbn}}</td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>PREZZO</th>
      <td mat-cell *matCellDef="let element">{{element.price}}</td>
    </ng-container>

    <ng-container matColumnDef="note">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>NOTE</th>
      <td mat-cell *matCellDef="let element">{{element.note}}</td>
    </ng-container>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">

        <button mat-mini-fab color="accent" aria-label="Modifica libro" class="mr_5"
                (click)="openDialogBook(element.id)">
          <mat-icon>create</mat-icon>
        </button>

        <button mat-mini-fab color="warn" aria-label="Cancella libro">
          <mat-icon>delete_forever</mat-icon>
        </button>

      </td>
    </ng-container>

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

  </table>

Enjoy!


Condividi su Facebook

Commentami!