Highlight row in virtual scroll table no matter scroll position

Question

I've looked for an answer to this but came up with nothing. I have a virtual scroll table in an angular4 stack with hundreds of rows. I have created a function to highlight a row on click and it's working, but because it's a virtual scroll the highlight is transferring to same virtual position post scroll and I'd like it to go with the specific row no matter the scroll position. Not sure if this is possible with a virtual table, but hoping for some ideas. Thanks!

component.ts

    onRowSelected(index: any) {
    this.selectedRow = index;
  }

.html

<tr *ngFor="let row of viewPortItems; let rowIdx = index" (click)="onRowSelected(rowIdx)" [class.active]="rowIdx === selectedRow">
                    <ng-container *ngFor="let dataItem of row; let i = index;">

.css

.table tr.active td {
    background-color: #5bc0de;
    color: azure
}

score 1 · Accepted Answer · answered Feb 22 '18 at 03:05

1

Is it possible to use a property on the row rather than the row index?

i.e. assume row.dataItem has some unique key dataItemKey

onRowSelected(key: any) {
    this.selectedKey = key;
}

.html

<tr *ngFor="let row of viewPortItems" (click)="onRowSelected(row.dataItem.dataItemKey)" [class.active]="row.dataItem.dataItemKey === selectedKey">
    <ng-container *ngFor="let dataItem of row; let i = index;">

answered Feb 22 '18 at 03:05

Simon K

2,762
1
11
20

Thanks! Just the reminder I needed. Used my get indices function to grab it for this and stays just like I needed it to. Thanks for the idea! – BenedictCarnel Feb 22 '18 at 20:33

Highlight row in virtual scroll table no matter scroll position

1 Answers1