Building Table Views with Phoenix LiveView

Creating the Pagination LiveComponent

Just as with sorting and filtering, we want to create a dedicated LiveComponent for the pagination functionality. Open up lib/meow_web/live/pagination_component.ex. Since the PaginationComponent is slightly larger than the previous LiveComponents, we’ll add the code in two steps instead of one. Please key in the following code first:

defmodule MeowWeb.MeerkatLive.PaginationComponent do
  use MeowWeb, :live_component

  alias MeowWeb.Forms.PaginationForm

  def render(assigns) do
    ~H"""
    <div>
      <div>
        <%= for {page_number, current_page?} <- pages(@pagination) do %>
          <div phx-click="show_page"
               phx-value-page={page_number}
               phx-target={@myself}
 class={if current_page?, ...