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