Page Size Control

View Source

To allow users to change the page size, you can create a component similar to this:

attr :current_size, :integer, required: true

def page_size_links(assigns) do
  ~H"""
  <ul class="page-size-links">
    <li
      :for={page_size <- [10, 20, 40, 60]}
      class={page_size == @current_size && "is-active"}
    >
      <.link phx-click="set-page-size" phx-value-size={page_size}>
        {page_size}
      </.link>
    </li>
  </ul>
  """
end

Render it with:

<.page_size_links current_size={@meta.page_size} />

And handle the event:

  def handle_event("set-page-size", %{"size" => page_size}, socket) do
    flop = %{socket.assigns.meta.flop | page_size: page_size, limit: nil}
    path = Flop.Phoenix.build_path(~p"/pets", flop)

    {:noreply, push_patch(socket, to: path)}
  end