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

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.