@kit-ng-ui/pagination

Paged navigation rail with size-changer, quick jumper, simple / mini modes, and auto-clamping when total shrinks.

Install

pnpm add @kit-ng-ui/pagination

@use '@kit-ng-ui/pagination/styles' as pagination;

Usage

<kit-pagination
  [total]="dataset.length"
  [(pageIndex)]="page"
  [(pageSize)]="pageSize"
  [showSizeChanger]="true"
  [showQuickJumper]="true"
></kit-pagination>

pageIndex is 1-based.

API

<kit-pagination>

| Input | Type | Default | Description | | ----------------- | -------------------------------------------- | ------------------- | -------------------------------------------------------------------------------- | | total | number | 0 | Total number of items. | | pageIndex | number (two-way) | 1 | Current page (1-based). | | pageSize | number (two-way) | 10 | Items per page. | | pageSizeOptions | ReadonlyArray<number> | [10, 20, 50, 100] | Options shown in the size-changer. | | showSizeChanger | boolean | false | Render the page-size dropdown. | | showQuickJumper | boolean | false | Render a "Go to" input. | | showTotal | boolean \| (total, [start, end]) => string | false | true for the built-in X–Y of N items label, or a formatter for full control. | | size | 'default' \| 'small' | 'default' | Compact mode. | | simple | boolean | false | Single-input minimal layout. | | disabled | boolean | false | Disable all interactions. | | ariaLabels | Partial<KitPaginationAriaLabels> | {} | Localize the assistive-tech labels. Unset keys keep the English defaults. |

Localizing ARIA labels

The rail ships English aria-labels (Pagination, Previous page, Next page, Page N, Jump back, Jump forward). In a non-English app, pass a partial ariaLabels — only the keys you override change; everything else stays default:

<kit-pagination
  [total]="total"
  [(pageIndex)]="page"
  [ariaLabels]="{
    root: 'Phân trang',
    prev: 'Trang trước',
    next: 'Trang sau',
    page: pageLabel,
    jumpPrev: 'Lùi nhanh',
    jumpNext: 'Tiến nhanh'
  }"
></kit-pagination>

// `page` interpolates the 1-based page number.
pageLabel = (index: number) => `Trang ${index}`;

Note: Because showTotal accepts a boolean or a formatter function, it is not a coercible boolean attribute — always bind it ([showTotal]="true" or [showTotal]="fn"). A bare showTotal attribute or the string showTotal="false" will not behave like a real boolean.

| Output | Payload | Description | | ---------------- | -------- | --------------------------------------------- | | pageChange | number | Fires with the new 1-based pageIndex. | | pageSizeChange | number | Fires when the size-changer picks a new size. |