@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. |

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. |