CODEWITHSUNDEEP
cssangulartypescriptvirtualscroll
BenedictCarnel
BenedictCarnel

Reputation: 19

Highlight row in virtual scroll table no matter scroll position

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
}

Upvotes: 0

Views: 903

Answers (1)

Simon K
Simon K

Reputation: 2857

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;">

Upvotes: 1

Related Questions