Building Table Views with Phoenix LiveView

Sorting with LiveComponent

As mentioned above, we want our LiveComponent to handle the user interactions, update the sorting parameters, and notify the LiveView about the changes. The SortingComponent that follows does just that. Open lib/meow_web/live/sorting_component.ex, and have a look at the module shown here. We’ll go through it step by step afterward.

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

  def render(assigns) do
    ~H"""
    <div phx-click="sort" phx-target={@myself} >
      <%= @key %> <%= chevron(@sorting, @key) %>
    </div>
    """
  end

  def handle_event("sort", _params, socket) do
    %{sorting: %{sort_dir: sort_dir}, key: key} = socket.assigns

 sort_dir ...