Data

Paginator

Page navigation for long lists, with a page size select, a page report and a total.

Features12

API

Theming

Basic

Bind [(first)], rows and totalRecords; pageChange reports the new page. The current page has aria-current="page".

Page 1 of 12, records from 1

9 lines

<tx-paginator  [(first)]="first"  [rows]="10"  [totalRecords]="120"  (pageChange)="state.set($event)"/><p class="status">  Page {{ state().page + 1 }} of {{ state().pageCount }}, records from {{ first() + 1 }}</p>

rowsPerPageOptions adds a page size select; [(rows)] follows it. A size that is not in the list (here 20) is added, { showAll: 'All' } shows every record. After a size change the first record of the page stays on screen.

20 rows per page, first record 1

7 lines

<tx-paginator  [(first)]="first"  [(rows)]="rows"  [totalRecords]="240"  [rowsPerPageOptions]="options"/><p class="status">{{ rows() }} rows per page, first record {{ first() + 1 }}</p>

Total

showTotal writes the translated "Total: N" at the start. On narrow screens it moves above the page buttons.

Total: 1284

Current page report

showCurrentPageReport shows "3 of 12" (translated). currentPageReportTemplate takes {currentPage}, {totalPages}, {first}, {last}, {rows} and {totalRecords}; the report is a polite live region.

9 lines

<tx-paginator showCurrentPageReport [(first)]="first" [rows]="10" [totalRecords]="120" /><tx-paginator  showCurrentPageReport  currentPageReportTemplate="{first}–{last} of {totalRecords}"  [showPageLinks]="false"  [(first)]="first"  [rows]="10"  [totalRecords]="120"/>

Jump to page

showJumpToPageDropdown adds a select with every page; showJumpToPageInput adds a field — Enter or leaving it goes to the typed page (out of range numbers are clamped).

14 lines

<tx-paginator  showJumpToPageDropdown  [showPageLinks]="false"  [(first)]="first"  [rows]="10"  [totalRecords]="400"/><tx-paginator  showJumpToPageInput  [showPageLinks]="false"  [(first)]="first"  [rows]="10"  [totalRecords]="400"/>

Compact

Below compactBreakpoint (40rem by default) the paginator shows compactPageLinkSize page buttons (3) and no first / last buttons, so it fits one line on a phone. Narrow the window to see it; the second paginator is compact below 100rem.

Server

Server pages: pageChange gives first and rows for the request, TxPaginationParams is the shape of the request (page is 1-based) and firstToPage converts. The list below is loaded with a delay.

Invoice #0001
Invoice #0002
Invoice #0003
Invoice #0004
Invoice #0005

Total: 87

13 lines

<ul class="list" [attr.aria-busy]="loading()">  @for (invoice of invoices(); track invoice.id) {    <li>{{ invoice.title }}</li>  }</ul><tx-paginator  showTotal  [first]="(params().page - 1) * params().limit!"  [rows]="params().limit!"  [totalRecords]="total()"  [rowsPerPageOptions]="[5, 10, 50, 100]"  (pageChange)="load($event)"/>

Template

txPaginatorStart and txPaginatorEnd put own content at the ends of the bar; both get the page state.

15 lines

<tx-paginator [(first)]="first" [rows]="10" [totalRecords]="120">  <ng-template txPaginatorStart let-state>    <button      txButton      text      severity="secondary"      icon="refresh"      aria-label="Reload"      (click)="reloads.set(reloads() + 1)"    ></button>  </ng-template>  <ng-template txPaginatorEnd let-state>    <span class="muted">Page {{ state.page + 1 }} · reloaded {{ reloads() }}×</span>  </ng-template></tx-paginator>

Icons

Own icons for the navigation buttons: firstPageIcon, previousPageIcon, nextPageIcon, lastPageIcon. In right-to-left pages the arrows turn around.

9 lines

<tx-paginator  firstPageIcon="step-backward"  previousPageIcon="chevron-left"  nextPageIcon="chevron-right"  lastPageIcon="step-forward"  [(first)]="first"  [rows]="10"  [totalRecords]="120"/>

States

disabled turns every control off. With [alwaysShow]="false" a list of one page has no paginator at all.

Disabled

8 lines

<tx-toggle-switch label="Disabled" [(ngModel)]="disabled" /><tx-paginator  [disabled]="disabled()"  [rows]="10"  [totalRecords]="120"  [rowsPerPageOptions]="[10, 20]"/><tx-paginator [alwaysShow]="false" [rows]="10" [totalRecords]="8" />

Pass through

pt adds classes and styles to the parts — here a bordered bar and bold page numbers.

Design tokens

dt changes the tokens of one paginator — round page buttons with a dark current page.