Pagination

Component

Interactive examples and API documentation

Basic
Basic pagination.
Code 
<%= render Hakumi::Pagination::Component.new(total: 50) %>
Align
Pagination alignment: start, center, end.
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render Hakumi::Pagination::Component.new(total: 50, align: :start) %>
  <%= render Hakumi::Pagination::Component.new(total: 50, align: :center) %>
  <%= render Hakumi::Pagination::Component.new(total: 50, align: :end) %>
<% end %>
More
More pages with ellipsis.
  • 1
  • 5
  • 6
  • 7
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
Code 
<%= render Hakumi::Pagination::Component.new(total: 500, current: 6) %>
Changer
Change page size.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render Hakumi::Pagination::Component.new(
    total: 500,
    show_size_changer: true,
    page_size_options: [10, 20, 50, 100]
  ) %>
  <%= render Hakumi::Pagination::Component.new(
    total: 500,
    show_size_changer: true,
    disabled: true
  ) %>
<% end %>
Jumper
Jump to a page directly.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
  • Go to
Code 
<%= render Hakumi::Pagination::Component.new(
  total: 500,
  show_quick_jumper: true,
  show_size_changer: true
) %>
Mini size
Mini size pagination.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
  • Go to
  • Total 500 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render Hakumi::Pagination::Component.new(total: 50, size: :small) %>
  <%= render Hakumi::Pagination::Component.new(
    total: 500,
    size: :small,
    show_size_changer: true,
    show_quick_jumper: true
  ) %>
  <%= render Hakumi::Pagination::Component.new(
    total: 500,
    size: :small,
    show_total: true
  ) %>
<% end %>
Simple mode
Simple mode pagination.
  • / 5
  • / 5
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render Hakumi::Pagination::Component.new(total: 50, simple: true) %>
  <%= render Hakumi::Pagination::Component.new(total: 50, simple: true, disabled: true) %>
<% end %>
Controlled
Controlled page number.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
Code 
<%= render Hakumi::Space::Component.new(size: :small) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Button::Component.new(id: "pagination-go-first", size: :small) do %>
      Go to page 1
    <% end %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Button::Component.new(id: "pagination-log-current", size: :small) do %>
      Log current page
    <% end %>
  <% end %>
<% end %>

<%= render Hakumi::Pagination::Component.new(
  total: 500,
  current: 3,
  id: "controlled-pagination"
) %>

<script>
  (() => {
    const pagination = document.getElementById("controlled-pagination")
    const goFirst = document.getElementById("pagination-go-first")
    const logCurrent = document.getElementById("pagination-log-current")
    if (!pagination || !goFirst || !logCurrent) return

    const wire = () => {
      const api = pagination.hakumiComponent?.api
      if (!api) return false

      goFirst.addEventListener("click", () => api.goTo(1))
      logCurrent.addEventListener("click", () => console.log("Current page:", api.getCurrent()))
      pagination.addEventListener("hakumi--pagination:change", (event) => {
        console.log("Page changed:", event.detail)
      })
      return true
    }

    if (wire()) return

    const onRegister = ({ detail }) => {
      if (detail.id !== pagination.id) return
      if (wire()) window.removeEventListener("hakumi-component:registered", onRegister)
    }

    window.addEventListener("hakumi-component:registered", onRegister)
  })()
</script>
Total number
You can show the total number of data by setting show_total.
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page
    10 / page
    20 / page
    50 / page
    100 / page
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page
    10 / page
    20 / page
    50 / page
    100 / page
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render Hakumi::Pagination::Component.new(
    total: 85,
    show_total: true,
    page_size: 20
  ) %>
  <%= render Hakumi::Pagination::Component.new(
    total: 85,
    show_total: "Total 85 items",
    page_size: 20
  ) %>
<% end %>
Show All
Show all configured props.
  • Total 500 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
  • Go to
Code 
<%= render Hakumi::Pagination::Component.new(
  total: 500,
  show_size_changer: true,
  show_quick_jumper: true,
  show_total: true
) %>
Prev and next
Use text link for prev and next button.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 50
  • 10 / page
    10 / page
    20 / page
    50 / page
    100 / page
Code 
<%= render Hakumi::Pagination::Component.new(
  total: 500,
  prev_text: "Previous",
  next_text: "Next"
) %>

Pagination API

Prop Type Default Description
total Integer - Total number of data items (required).
current Integer 1 Current page number.
page_size Integer 10 Number of data items per page.
size Symbol :default Size of pagination. Options: :default, :small.
align Symbol :start Alignment of pagination. Options: :start, :center, :end.
disabled Boolean false Disable pagination.
simple Boolean false Show simple mode.
show_size_changer Boolean nil Show page size changer. Auto-enabled when total > 50.
show_quick_jumper Boolean false Show quick jumper input.
show_total Boolean | String or Proc nil Show total number. Can be true, a string, or a Proc.
page_size_options Array [10, 20, 50, 100] Options for page size changer.
hide_on_single_page Boolean false Hide pagination when only one page.
prev_text String nil Custom text for previous button.
next_text String nil Custom text for next button.
href String nil Base URL for navigation. When set, pagination will navigate to this URL with page params.
page_param Symbol :page URL parameter name for page number.
per_page_param Symbol :per_page URL parameter name for page size.
turbo_frame String nil Turbo Frame ID to update instead of full page navigation.
turbo_action String nil Turbo visit action (advance, replace). Uses Turbo.visit when set.
preserve_params String nil Comma-separated params to preserve across navigation (e.g., 'sort_field,sort_order'). Reads from parent element with data-pagination-state.

JavaScript API (element.hakumiPagination)

Prop Type Default Description
getCurrent() Function - Get current page number.
setCurrent(page) Function - Set current page number.
goTo(page) Function - Go to a specific page number.
getPageSize() Function - Get current page size.
setPageSize(size) Function - Set page size.
getTotal() Function - Get total items count.
getTotalPages() Function - Get total pages count.
next() Function - Go to next page.
prev() Function - Go to previous page.
jumpNext() Function - Jump forward 5 pages.
jumpPrev() Function - Jump backward 5 pages.

Events

Prop Type Default Description
hakumi--pagination:change CustomEvent - Triggered when page changes. Detail: { current, pageSize, total }.
hakumi--pagination:size_change CustomEvent - Triggered when page size changes. Detail: { current, pageSize, total }.