Docs / Components
SensePaginatorComponent
Pagination navigation from @artificialsenselabs/ui for paged data sets — page links, first/prev/next/last controls, optional rows-per-page and jump input.
Live demo: run nx serve showcase and open /components/paginator (port 4202).
Overview
Category: Navigation. Selector: sense-paginator. Import: import { SensePaginatorComponent } from '@artificialsenselabs/ui';
<sense-paginator
[totalRecords]="items.length"
[(first)]="first"
[(rows)]="rows"
(pageChange)="onPageChange($event)"
/> Use pageChange for the full event payload. Two-way first and rows bindings update slice state; avoid wiring analytics to firstChange / rowsChange alone.
Inputs & outputs
| API | Type | Default | Description |
|---|---|---|---|
totalRecords | number | 0 | Total records across all pages. |
rows | number | 10 | Rows per page — two-way model(). |
first | number | 0 | Index of the first record on the current page — two-way model(). |
pageChange | SensePaginatorPageEvent | — | Emitted on page or rows-per-page change (page, first, rows, pageCount). |
rowsPerPageOptions | number[] | null | null | When set, shows a rows-per-page <select>. |
showCurrentPageReport | boolean | false | Display the currentPageReportTemplate string. |
ariaLabel | string | null | null | Accessible name for the role="navigation" landmark. |
Accessibility
- Pattern:ARIA pagination with
role="navigation"on the host. - Current page link uses
aria-current="page"; icon buttons have i18naria-labels. - Live region announces page changes for screen readers.
- Disabled controls use native
disabledplusaria-disabled.