There seems to be an issue with the library itself and with recycling views before reusing them during scrolling.
Fortunately, if you want to take things in to your hands, by manually adding highlighted class you can fix the issue. Take a look at updated stackblitz.
app.component.ts
import {AfterViewInit, ChangeDetectorRef, Component,OnDestroy,OnInit, ViewChild} from '@angular/core';
import {NodeService} from './nodeservice';
import {TreeNode} from 'primeng/api';
// import { PrimeNGConfig } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild(TreeTable)
private virtualTable: TreeTable;
virtualFiles: TreeNode[];
selectedNode: TreeNode;
cols: any[];
private virtualTableSub: Subscription;
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.virtualFiles = Array.from({length: 1000}).map((_,i) => this.createNode(i, 100));
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'size', header: 'Size' },
{ field: 'type', header: 'Type' }
];
}
expanded(e) {
this.selectedNode = null;
setTimeout(() => {
this.selectedNode = e.node;
this.cdr.detectChanges();
});
}
collapsed(e) {
this.selectedNode = null;
setTimeout(() => {
this.selectedNode = e.node;
this.cdr.detectChanges();
});
}
ngAfterViewInit() {
this.virtualTableSub = this.virtualTable.tableService.uiUpdateSource$.subscribe(() => {
if (this.virtualTable.virtualScroll) {
this.cdr.detectChanges();
}
});
}
ngOnDestroy() {
this.virtualTableSub?.unsubscribe();
}
createNode(i: number, children: number): TreeNode {
let node: TreeNode = {
data: {name: 'Node ' + i, type: 'virtual node', size: Math.ceil(Math.random() * 10000) + 'kb'},
children: Array.from({length: children}).map((_,j) => {
return {
data: {name: 'Node ' + i + '.' + j, type: 'virtual child node', size: Math.ceil(Math.random() * 10000) + 'kb'}
}
})
};
return node;
}
}
app.component.html
<div class="card">
<h5>Full Page Scroll</h5>
<p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window
size. See the <a [routerLink]="['/treetable/flexscroll']">Full Page</a> demo for an example.</p>
<h5>Virtual Scroll with 100000 Nodes</h5>
<p-treeTable #treeTable [value]="virtualFiles" [columns]="cols" [scrollable]="true" [rows]="100"
selectionMode="single" [(selection)]="selectedNode" (onNodeExpand)="expanded($event)"
(onNodeCollapse)="collapsed($event)" scrollHeight="200px" [virtualScroll]="true" [virtualRowHeight]="34"
dataKey="name">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr [ttRow]="rowNode" [ttSelectableRow]="rowNode" style="height:34px"
[ngClass]="{ 'highlighted' : selectedNode?.data === rowData }">
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-treeTable>
</div>
app.component.scss
::ng-deep.ui-treetable .ui-treetable-tbody > tr.highlighted {
background-color: #57a0d7;
color: #fff;
}
I would encourage you to open an issue on the library's github repository.
