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
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>
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









