mat-table skip to specific row programmatically

Question

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.

for best approach - we must need the code that you have tried — Prashant Pimpale, Nov 11 '19 at 09:17
So how this `what the best approach to do it` can be valid? You must try and then come here if certain part is not working as you expected — Prashant Pimpale, Nov 11 '19 at 09:21

score 2 · Accepted Answer · answered Nov 18 '19 at 12:03

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'});
 }

}

mat-table skip to specific row programmatically

1 Answers1