Pagination

Page-number footer with a 'Showing X to Y of N' summary, prev/next controls, and ellipses around the current page.

Preview

Previous Next

React preview

LiveView (HEEx) 

alias DesignSystem.UI.Pagination

<Pagination.pagination
  page={@page}
  page_count={@page_count}
  total={@total}
  per_page={10}
  href_fn={fn p -> ~p"/projects?page=#{p}" end}
/>

React (JSX) 

import { Pagination } from "../ui/index.mjs"

<Pagination
  page={page}
  pageCount={pageCount}
  total={total}
  perPage={10}
  hrefFn={(p) => `/projects?page=${p}`}
/>