Building Table Views with Phoenix LiveView

Adding the Filter to the LiveView

To add the FilterComponent to our LiveView, open up the HEEx template at lib/meow_web/live/meerkat_live.html.heex and add the following code:

<div>
  <!-- Add this .live_component element -->
  <.live_component
    module={MeowWeb.MeerkatLive.FilterComponent}
    id="filter"
    filter={@filter} />

  <!-- Table element stays here -->
</div>

Now, we render the FilterComponent above our table. However, if you try to start the server, you’ll see an error message since we still have to add the @filter assign to the socket. Let’s fix that by assigning the default filter parameters. Open the LiveView at lib/meow_web/live/meerkat_live.ex and add the following code:

defmodule MeowWeb.MeerkatLive do ...