Building Table Views with Phoenix LiveView

Creating the LiveView

Let’s create a new LiveView for implementing the infinity scrolling logic. Create a new file at lib/meow_web/live/infinity_live.ex and add the following code to it:

defmodule MeowWeb.InfinityLive do
  use MeowWeb, :live_view

  alias Meow.Meerkats

  def render(assigns) do
    ~H"""
    <table>
      <tbody id="meerkats"
             phx-update="append"
             phx-hook="InfinityScroll">
        <%= for meerkat <- @meerkats do %>
          <tr id={"meerkat-#{meerkat.id}"}>
            <td><%= meerkat.id %></td>
            <td><%= meerkat.name %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
    """
  end
end

Let’s have a look at the render/1 function. It generates a HEEx template, which displays a simple table that renders our ...