PrimeNG Table lazy loading first index desynchronization when totalRecords changes mid-request

Answer: PrimeNG does not automatically clamp the first index

When a lazy‑load request is in flight and the bound totalRecords changes (e.g., another user deletes rows), PrimeNG keeps the originally sent first value. If the new totalRecords is smaller than that first, the component renders an empty table until the page index is manually changed.

Confirmed facts from PrimeNG behavior

• The table uses the first and rows values from LazyLoadEvent to request data; it does not recompute first after the response arrives.
• If first >= totalRecords after the update, the view shows no rows.
• PrimeNG provides no built‑in clamp or reset; developers must adjust first themselves or invoke the paginator’s changePage API.
• Starting with PrimeNG 13, the paginator exposes changePage(page: number) and an onPage event, which can be used to synchronize after data arrives.

Steps to eliminate the empty‑state flash

1. Update totalRecords atomically with the data array – assign both from the server response in the same callback.
2. After the assignment, check bounds: if first >= totalRecords, reset the page index.
3. Reset options:
   • Template‑driven: bind [first] to a component property and set it to 0.
   • Programmatic (PrimeNG 13+): call paginator.changePage(0) where paginator is the Paginator reference obtained via @ViewChild.
4. Optional: defer UI update – perform the first reset inside a setTimeout(() => {...}, 0) or after change detection to avoid a flicker.

Missing diagnostic detail

To decide whether you can use paginator.changePage or must reset the [first] binding, we need to know the PrimeNG version in your package.json. If the version is ≥13, the paginator API is available; otherwise, use the [first] binding reset.

// Example component snippet (PrimeNG ≥13)
@ViewChild('paginator') paginator: Paginator;

onLazyLoad(event: LazyLoadEvent) {
  this.dataService.getRows(event.first, event.rows).subscribe(resp => {
    this.rows = resp.data;               // update data array
    this.totalRecords = resp.total;      // update totalRecords atomically
    if (this.first >= this.totalRecords) {
      this.paginator.changePage(0);      // reset to first page
    }
  });
}

// Example for PrimeNG <13
[first]="first"
[totalRecords]="totalRecords"
(rows)="onLazyLoad($event)"

onLazyLoad(event: LazyLoadEvent) {
  this.dataService.getRows(event.first, event.rows).subscribe(resp => {
    this.rows = resp.data;
    this.totalRecords = resp.total;
    if (this.first >= this.totalRecords) {
      this.first = 0;   // binding reset
    }
  });
}