HyPagination

A navigation control for paging through a large, segmented data set (table rows, search results, a list). Renders numbered page buttons with ellipsis truncation, prev/next (and optional first/last) arrows, an optional rows-per-page selector, and an optional range label.

Controlled by design. The consumer owns pageIndex / pageSize; the component renders that state, emits a single change event on interaction, and the consumer echoes the new state back (slice locally or refetch). This matches hy-table (stateless/controlled) and is the correct model when paired with a state-owning data engine — there is no internal source of truth to drift.

Accessibility: a <nav> landmark with aria-label; the current page button carries aria-current="page"; arrows are disabled at the bounds.

Responsive. A ResizeObserver measures the control's own width and fits the page window to it (the AG Grid / Ant responsive model): siblingCount shrinks as the container narrows, and when even a zero-sibling window no longer fits, the layout collapses to the compact "Page X of Y" form automatically. siblingCount and compact are therefore an upper bound and a forced floor — the rendered window is never wider than the author asks, and compact (when set) pins the compact layout at every width. Until first measured (SSR, first paint) the author's full window renders.

Examples

Basic (controlled)

<hy-pagination total="100" page-index="0" page-size="10"></hy-pagination>

With size selector and range label

<hy-pagination total="248" page-index="2" page-size="20" show-page-size show-total></hy-pagination>

Forced compact (pins "Page X of Y" at every width)

<hy-pagination total="100" page-index="0" page-size="10" compact></hy-pagination>

Events

• change - Fired on any page or size change. Detail: PaginationChangeDetail ({ pageIndex, pageSize, reason }). When the size changes, pageIndex resets to 0.

Slots

• info - Custom range/total content, replacing the built-in show-total label.