Keyboard Navigation in Material Table

[Rob Shepherd]

Hi,

I am using an Angular 4 Material Table and I want to set the focus on a cell and move the focus via keystrokes (spreadsheet like).

For example I have defined the following columns in my table.  By using the tab key I would like move through each of the 3 cells in the first row then move to the next row etc. 

How can I do this?

      <ng-container matColumnDef="numberOfTargets">

        <mat-header-cell *matHeaderCellDef mat-sort-header>Targets</mat-header-cell>

        <mat-cell *matCellDef="let competition">

          <input class="numberOfTargets" matInput type="Number" min="1" max="1000" [(ngModel)] = "competition.numberOfTargets" placeholder="Targets">

        </mat-cell>

      </ng-container>

      <ng-container matColumnDef="event">

        <mat-header-cell *matHeaderCellDef mat-sort-header>Event</mat-header-cell>

        <mat-cell *matCellDef="let competition">

           <mat-select [(value)]="competition.event" placeholder="Event">

            <mat-option *ngFor="let eventItem of eventList" [value]="eventItem.viewValue">

              {{ eventItem.viewValue}}

            </mat-option>

          </mat-select>

        </mat-cell>

      </ng-container>

      <ng-container matColumnDef="score">

        <mat-header-cell *matHeaderCellDef mat-sort-header>Score</mat-header-cell>

        <mat-cell *matCellDef="let competition">

          <input class="score" matInput type="Number" min="1" max="1000" [(ngModel)] = "competition.score" placeholder="Score">

        </mat-cell>

      </ng-container>

If someone could help it would be much appreciated.

Rob.