Paginator

New

Navigate a collection one page at a time.

Page linksPage sizeAPI events

Project collection

The list and paginator share first and rows. Change the page to see another set of records.

Project 01In progress
Project 02Completed
Project 03Completed
Project 04In progress
Project 05Completed

Change the page or the number of rows.

Compact

Hide page links and first/last controls, and customize the report.

Usage and API

Import AvPaginator and AvPaginatorPageEvent from avero-ui. Bind first (zero-based offset), rows (default 10) and totalRecords. Use onPageChange to load data or slice a local array. The paginator does not fetch or render records itself.

HTML / TypeScript

<av-paginator [(first)]="first" [(rows)]="rows" [totalRecords]="totalRecords"
  [rowsPerPageOptions]="[5, 10, 20]" [loading]="isLoading()"
  (onPageChange)="loadPage($event)" />

loadPage(event: AvPaginatorPageEvent): void {
  // Use event.first as the API offset and event.rows as the limit.
  // Set isLoading before the request and clear it on success or error.
}

Events. onPageChange emits page, first, rows and pageCount. Page and first are zero-based. Changing page size returns to the first page and emits one event. first and rows support two-way binding. Loading and disabled block all controls.

Controlled data. Call your API once on initialization. External input changes do not emit page events. When filtering or replacing data, reset first to 0 in the parent and load that page. Out-of-range values are clamped for display without rewriting your model.

Appearance. Configure pageLinkSize (default 5), rowsPerPageOptions, showPageLinks, showFirstLastIcon and showCurrentPageReport. Report placeholders: {first}, {last}, {rows}, {currentPage}, {totalPages} and {totalRecords}. Empty collections report 0–0 of 0.

Theme. Override --av-paginator-accent, --av-paginator-background, --av-paginator-border, --av-paginator-radius, --av-paginator-color, --av-paginator-hover and --av-paginator-selected-background.