Building Table Views with Phoenix LiveView

Adding Pagination to the LiveView

Before we can use the PaginationComponent, we need to add it to our HEEx template. Please open up lib/meow_web/live/meerkat_live.html.heex and add the following code:

<div>
  <!-- Filter form stays here -->

  <!-- Table stays here -->

  <!-- Add this .live_component -->
  <.live_component
      module={MeowWeb.MeerkatLive.PaginationComponent}
      id="pagination"
      pagination={@pagination} />
</div>

This will render our PaginationComponent beneath the table. Now, we need to assign our default @pagination values. Open up the LiveView at lib/meow_web/live/meerkat_live.ex and update the code as follows:

defmodule MeowWeb.MeerkatLive do
  use MeowWeb, :live_view

  # Other aliases omitted ...