Access a specific row in a Material Table in Angular

I have the following html

<mat-card>
<mat-card-header>
<mat-card-title>Results</mat-card-title>
</mat-card-header>
<mat-card-content [style.overflow]="'auto'">
<table mat-table [dataSource]="[resultEntries$()][0]">
<ng-container matColumnDef="col-lemma">
<td mat-cell *matCellDef="let element">
<!-- [...] -->
</td>
</ng-container>
<!-- [...] -->
<tr
mat-row
#tableRows
*matRowDef="let row; columns: displayedColumns; let index = index"
(click)="cindex = index"
[class.selected]="index == cindex"
></tr>
</table>
</mat-card-content>
</mat-card>


And I need to scroll into a specific row stored in variable called myIndex, and I'm trying the following code:

@ViewChildren('tableRows', { read: ElementRef })
rowContainers: QueryList<ElementRef<HTMLTableRowElement>> = new QueryList<
ElementRef<HTMLTableRowElement>
>();

constructor() {
effect(() => {
setTimeout(() => {
this.rowContainers.first.nativeElement.scrollIntoView({
behavior: 'instant',
});
});
});
}



If I console.log(this.rowContainers.first.nativeElement), I don't even get a list of rows from the dataSource.

<tr _ngcontent-ng-c2872871574 role="row" mat-row class="mat-mdc-row mdc-data-table__row cdk-row selected ng-star-inserted"></tr>


I don't know how to scroll to the nth element of the dataSource, where "n" is an integer stored in myIndex, and myIndex is known even before the dataSource loads. Any help will be appreciated. Thank you.

Continue reading...