Add Named-Slot via Elixir-Code instead of Heex

Phoenix Forum Questions / Help
, , ,
1

Named slots are awesome, they allow e.g. defining table columns inside a html.heex file like

<.table items={items}>
<:col let={f} field={:title}>...></:col>
</.table>

I want to write a reusable wrapper to allow selecting multiple table entries for bulk operations.
To achieve this, an additional column-slot is added to the list of columns and handed forward to the real table-render function.

@impl Phoenix.LiveComponent
def render(assigns) do
  edit_col = %{
      label: "",
      field: :select,
      inner_block: fn _changed, argument ->
        assigns = assign(assigns, id: argument.id)

        ~H"""
        <button rel="toggle-select" phx-click="toggle-select" phx-value-id={@id} phx-target={@myself}> 
          <input type="checkbox" checked={MapSet.member?(@selected, @id)} />
        </button>
        """
      end,
      __slot__: :col
    }
      assigns
      |> assign(:col, [edit_col | assigns.col])
      |> FlopComponents.table()
      end

This works, but edit_col is created using the private API.

Is there a better way to create a named slot inside Elixir-Code - like a pre-defined function slot that can be used instead?

2

I think the simplest way to is to just provide a boolean attribute:

<tr :for={item <- @items}>
  <td :if={@show_bulk_edit}>
    <button rel="toggle-select" phx-click="toggle-select" phx-value-id={item.id} phx-target={@myself}> 
      <input type="checkbox" checked={MapSet.member?(@selected, item.id)} />
    </button>
  </td>
  <td :for={col <- @col}>
    <%= render_slot(col, item) %>
  </td>
</tr>

If you wanted to make it more configurable, allowing the user to define the checkbox (I was a little unclear from your example) because you want to treat those columns different in the styling or not allowing a “row click” on them, you can make it its own slot:

<tr :for={item <- @items}>
  <td :let={action <- @actions}>
    <%= render_slot(action, item) %>
  </td>
  <td :for={col <- @col}>
    <%= render_slot(col, item) %>
  </td>
</tr>
3

Hi @sodapopcan, thanks for your super fast response.

The app has multiple data tables and uses a framework for rendering the table (flop_phoenix, amazing work, btw.) - I don’t render the table itself.

Your suggestion with a boolean flag would work. The current named-slot approach with using the private API however, comes with the advantage of having the whole selection-work encapsulate in a live-component (handle_event, etc.) and by that not spread all over the place.