Search code examples
angularmat-tableangular-material-7

mat-table skip to specific row programmatically


I am implementing a table by a mat-table component of angular material. I want to skip to a specific row when some event in my code fired.

I tried so far to use the event of (focus) on row and virtual scrolling.

But I think that I missing something and it should more simple than this.


Solution

  • I found this question and I make for these some changes that this will work for my problem.
    in short - scrollIntoView - my code attach below if someone will need it for next time.

    //.tpl
    <tr mat-row
              #matrow
              [attr.serialNumber] = row.serialNumber
              [ngClass]="{'selectedRow': selectedNode && selectedNode.serialNumber === row.serialNumber}"
              *matRowDef="let row; columns: displayedColumns;"
     ></tr>
    
    // component.ts 
    // selected point is your desierd element from data source
     scrollRowToView(selectedPoint) {
        const row = this.rows.find(r => 
        r.element.nativeElement.getAttribute('serialNumber') === selectedPoint.serialNumber);
        if (row != null) {
        row.element.nativeElement.scrollIntoView( {behavior: 'smooth', block: 'center', inline : 'center'});
     }
    

    }