1

I have a list of products which I get from a webservice that I display in a mat-table, with filtering. I am currently able to select a product by clicking on the row to obtain the relevant row object to display.

<h3>Look up products: {{ prodArr.length }}</h3>
<mat-form-field >
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" #input>
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 65vw; height: 50vh;">
    <ng-container matColumnDef="pcode">
        <th mat-header-cell *matHeaderCellDef> Product Code </th>
        <td mat-cell *matCellDef="let prod"> {{ prod.PCODE }} </td>
    </ng-container>
                                      
    <ng-container matColumnDef="desc">
        <th mat-header-cell *matHeaderCellDef> Description </th>
        <td mat-cell *matCellDef="let prod"> {{ prod.DESCRIPTION }} </td>
    </ng-container>

    <ng-container matColumnDef="qty">
        <th mat-header-cell *matHeaderCellDef> Quantity </th>
        <td mat-cell *matCellDef="let prod"> {{ prod.QTY }} </td>
    </ng-container>
                                          
    <ng-container matColumnDef="unit">
        <th mat-header-cell *matHeaderCellDef> Unit </th>
        <td mat-cell *matCellDef="let prod"> {{ prod.UNIT }} </td>
    </ng-container>
                                          
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectProd(row)"></tr>
                                          
    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="4">No data matching the filter "{{ input.value }}"</td>
    </tr>
</table>

Now I want to be able to have the first row in focus by default when the table is first rendered, and to navigate through the table rows with the up/down keys, with the PCODE value of the row in focus being displayed in the #input field in the top of the table, and the "selectProd(row)" function being called at the (keydown.enter) event instead of the click event. How would this work? And how do I go about doing this with the filtered value from the input field?

  displayedColumns: string[] = ['pcode', 'desc', 'qty', 'unit'];
  dataSource = new MatTableDataSource(this.prodArr);

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
 }
Nooh Ahamad
  • 353
  • 10
  • 23
  • 1
    some time ago I made a directive to move across a mat-table using arrow keys:https://stackoverflow.com/questions/56562871/angular-6-html-table-create-dynamic-columns-and-rows/56664523#56664523 – Eliseo Jun 21 '21 at 10:27
  • I see it is pretty descriptive and I thank you for it, but how do I then get the values of the row in focus onto my input field? – Nooh Ahamad Jun 21 '21 at 10:36
  • 1
    if you has the "cells" in a ViewChildren, you use `let index=inputToArray.findIndex(x=>x.element===object.element)`. you need take account that in mat-table the "index" goes from top to down and from left to right -in a "normal" table go from left to right an top to down. if you know the rows of the table, the Math.floor(index/rows) give you the row where the cell is. – Eliseo Jun 21 '21 at 11:08

0 Answers0