L-ray

L-ray

Add Named-Slot via Elixir-Code instead of Heex

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?

First Post!

sodapopcan

sodapopcan

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>

Where Next?

Popular in Questions Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39467 209
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New

We're in Beta

About us Mission Statement