Pagination

Pagination is a native web component that renders pagination controls: a Previous button, page numbers with ellipsis truncation (first, last, current, and neighbors), and a Next button. Use it when you need to split long lists or tables into pages. When a page is clicked, it fires the change event and updates the page attribute automatically.

Preview

<pura-pagination id="paginacao" total="10" page="3"></pura-pagination>

<script type="module">
  const paginacao = document.getElementById("paginacao");
  paginacao.addEventListener("change", (e) => {
    console.log("Selected page:", e.detail.page);
  });
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/pagination.js"></script>

import "./pura/lib/pagination.js";