Building Table Views with Phoenix LiveView

Creating the Filter LiveComponent

As with our sorting functionality, we’ll encapsulate the filter logic into its own LiveComponent called FilterComponent. It will contain a simple form for receiving the user input and use another schemaless changeset for parsing said input. Create a file at lib/meow_web/live/filter_component.ex and key in the following code:

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

  alias MeowWeb.Forms.FilterForm

  def render(assigns) do
    ~H"""
    <div>
      <.form let={f} for={@changeset} as="filter"
          phx-submit="search" phx-target={@myself} >
        <div>
          <div>
            <%= label f, :id %>
            <%= number_input f, :id %>
            <%= error_tag f, :id %>
          </div>