Pagination
@xui/paginationPage navigation with prev/next, numbered pages with ellipses, an optional size changer and an item-count summary. pageIndex (1-based) and pageSize are two-way bindable.
Install
pnpm add @xui/pagination Add the barrel to a standalone component's imports:
import { XuiPaginationImports } from '@xui/pagination';
@Component({
imports: [XuiPaginationImports],
// …
})Examples
Basic
Loading preview…
<div class="flex flex-col gap-4">
<xui-pagination [total]="248" [(pageIndex)]="page" [(pageSize)]="size" showTotal />
<span class="text-foreground-muted text-sm">Page {{ page }}</span>
</div>With size changer
Loading preview…
<xui-pagination [total]="500" [(pageIndex)]="page" [(pageSize)]="size" showTotal showSizeChanger />Simple
Loading preview…
<xui-pagination [total]="120" [(pageIndex)]="page" simple />API
Page navigation for a paged collection. Two-way pageIndex (1-based) and pageSize; total is the item count. Renders prev/next, numbered pages with ellipses, an optional size changer and an item-count summary.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''totalnumberHow many items there are across all pages. With pageSize, this is what the page count is derived from.0pageIndexnumberThe current page, counting from 1. Two-way bindable with [(pageIndex)].1pageSizenumberItems per page. Two-way bindable, since the size changer writes to it.10pageSizeOptionsnumber[]The sizes offered by the size changer.this.config.pageSizeOptionsshowSizeChangerbooleanShow the per-page dropdown.this.config.showSizeChangershowTotalbooleanShow the "m–n of total" summary.this.config.showTotalsimplebooleanCollapse the numbered pages to a "page / total" readout with just previous and next. For narrow containers.this.config.simpledisabledbooleanBlock every control, e.g. while a page is loading.falsesiblingCountnumberPages shown on each side of the current page.this.config.siblingCount