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:

 <!-- Filter form stays here -->
 <!-- Table stays here -->
 <!-- Add this .live_component -->
  pagination=​{@pagination}​ />

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 ...

Get Building Table Views with Phoenix LiveView now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.