Pagination

The built-in pagination tag — an interactive pager on Mantine's Pagination whose active page tracks clicks. Usage, options, and live examples.

A built-in tag for an interactive pager, built on Mantine’s Pagination. Set total (the number of pages) and the active page tracks clicks out of the box — the tag ships the client state Mantine’s controlled component needs. Tune the shape with siblings, boundaries, withEdges, and withControls, and the look with size, radius, color, and gap.

Use it as {% pagination %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'pagination', …).

Demonstrations

Basic pager

Only total is required. Seed the initial page with defaultValue (defaults to 1). Click a page below — the active state follows.

Shape — siblings, boundaries, and edges

siblings sets how many page buttons flank the current page; boundaries sets how many are pinned at each end; withEdges adds first/last jump buttons. defaultValue picks the page shown on load.

Controls off

withControls is on by default (the prev/next arrows). Turn it off with withControls=false; disabled dims and disables the whole control.

Sizes, radius, and gap

size and radius take xs–xl; gap sets the space between buttons (a Mantine size or any CSS value).

With other components

Compute the page count in Python from a collection and a page size, then render the pager. Here the pager sits under a {% stack %} caption.

Attributes

Omit any attribute to take its default.

CSS Selectors

The control mounts inside an island wrapper carrying data-aardvark-island="Pagination"; Mantine’s Styles API exposes the row, each page button, and the truncation dots.

[data-aardvark-island="Pagination"]  /* the island wrapper */
.mantine-Pagination-root             /* the button row */
.mantine-Pagination-control          /* a single page / arrow button */
.mantine-Pagination-dots             /* the … truncation marker */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered control.