scrollToIndex in primeng virtualscroll table

Question

using primeng virtual scroll table in angular to handle huge set of data [array], here i want to use scrollToIndex is there any thing like cdk-virtual-scroll-viewport in primeng table, if user clicks on a button I need to scroll to a particular index (eg 100)

<div class="log-console-parent" #logsParentDiv (wheel)="onUserScroll()">
  <p-table [columns]="cols" [value]="getFilteredLogs()" [scrollable]="true" [rows]="100" scrollHeight="flex"
    [virtualScroll]="true" [virtualRowHeight]="27">
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns">
      <tr>
        <td>
          <span [innerHTML]="rowData.message"></span>
        </td>
      </tr>
    </ng-template>
  </p-table>  
</div>

versions : angular: 12, primeng: 12

score 0 · Answer 1 · answered Jun 16 '23 at 07:34

Yes, it is possible.

p-table component will let you use scrollToVirtualIndex method. Reference: https://www.primefaces.org/primeng-v12-lts/#/table (down to "Methods" part).

Example code:

*.component..html

<p-table
  #table <- Add this in order to create reference in component
  [columns]="cols"
  [value]="getFilteredLogs()"
  [scrollable]="true"
  [rows]="100"
  scrollHeight="flex"
  [virtualScroll]="true"
  [virtualRowHeight]="27"
>
  <ng-template
    pTemplate="body"
    let-rowData
    let-rowIndex="rowIndex"
    let-columns="columns"
  >
    <tr>
      <td>
        <span [innerHTML]="rowData.message"></span>
      </td>
    </tr>
  </ng-template>
</p-table>

*.component.ts

class xyz {
  @ViewChild('pTable') pTable: Table;

   /**
   * @param i starts from 0
   */
  scrollToRow(i: number): void {
    this.table.scrollToVirtualIndex(i);
  }
}

scrollToIndex in primeng virtualscroll table

1 Answers1