refactor sort to optional slot

lib/phoenix_better_table.ex

@@ -21,6 +21,7 @@ defmodule PhoenixBetterTable do
 
   * `:filter_control` - an optional slot that takes a single argument, a tuple of `{active?, id, myself}`. The interactive element should
   set `phx-click="filter_toggle"`, `phx-value-header={id}`, and `phx-target={myself}` for the event to be routed correctly.
+  * `:sort_control` - an optional slot that takes a single argument, a tuple of `{direction, id, myself}`. See above.
   """
 
   use Phoenix.LiveComponent
@@ -91,6 +92,7 @@ defmodule PhoenixBetterTable do
     |> assign_new(:engine_module, fn -> engine_module() end)
     |> assign_new(:sort, fn -> nil end)
     |> assign_new(:filter, fn -> %{} end)
+    |> assign_new(:sort_control, fn -> nil end)
     |> assign_new(:filter_control, fn -> nil end)
     |> assign_new(:class, fn -> "" end)
     |> assign_new(:body_class, fn -> "" end)
@@ -154,10 +156,23 @@ defmodule PhoenixBetterTable do
 
   defp column_filter(_), do: &to_string/1
 
-  defp sort_arrow(nil, _column), do: "—"
-  defp sort_arrow({column, order}, column) when order == :asc, do: "▲"
-  defp sort_arrow({column, order}, column) when order == :desc, do: "▼"
-  defp sort_arrow(_, _), do: "—"
+  defp column_sort_order({column, order}, column), do: order
+  defp column_sort_order(_, _), do: nil
+
+  attr(:direction, :atom, required: true)
+  attr(:rest, :global)
+
+  defp sort_control(assigns) do
+    ~H"""
+      <a style="color: #000000" href="#" {@rest}>
+        <%= case @direction do
+          nil -> "—"
+          :asc -> "▲"
+          :desc -> "▼"
+        end %>
+      </a>
+    """
+  end
 
   attr(:active?, :boolean, required: true)
   attr(:rest, :global)

lib/phoenix_better_table.html.heex

@@ -3,9 +3,13 @@
     <tr>
       <th :for={header <- @meta.headers} data-test-table-header={header.id}>
         <%= Map.get(header, :label, header.id) %>
-        <a :if={Map.get(header, :sort, true)} style="color: #000000" href="#" phx-click="sort" phx-value-header={header.id} phx-target={@myself}>
-          <%= sort_arrow(@sort, header.id) %>
-        </a>
+        <%= if Map.get(header, :sort, true) do %>
+          <%= if @sort_control do %>
+            <%= render_slot(@sort_control, {column_sort_order(@sort, header.id), header.id, @myself}) %>
+          <% else %>
+            <.sort_control direction={column_sort_order(@sort, header.id)} phx-click="sort" phx-value-header={header.id} phx-target={@myself} />
+          <% end %>
+        <% end %>
         &nbsp;
         <%= if @filter_control do %>
           <%= render_slot(@filter_control, {Map.has_key?(@filter, header.id), header.id, @myself}) %>

test/phoenix_better_table_test.exs

@@ -287,6 +287,30 @@ defmodule PhoenixBetterTableTest do
     """)
   end
 
+  test "custom sort control can be passed as slot" do
+    {:ok, view, _html} =
+      live_isolated_component(PhoenixBetterTable,
+        assigns: %{
+          meta: %{headers: [%{id: :name}]},
+          rows: [%{name: "John"}, %{name: "Jane"}]
+        },
+        slots: %{
+          sort_control:
+            slot(let: {direction, id, myself}) do
+              ~H[<span phx-click="sort" phx-value-header={id} phx-target={myself}>Sort (<%= direction %>)</span>]
+            end
+        }
+      )
+
+    html = view |> element("span[phx-click='sort']") |> render_click()
+
+    assert_table_matches(html, """
+    name
+    Jane
+    John
+    """)
+  end
+
   test "custom filter control can be passed as a slot" do
     {:ok, view, _html} =
       live_isolated_component(PhoenixBetterTable,