How to set the PHX-VALUE for an action button of a table component

Phoenix Forum Questions / Help
,
1

I’m quite new to Elixir and the Phoenix framework, so bear with me if I am doing something obvious wrong…

Using a Phoenix Liveview and the generic table component provided by core_components.ex I’m trying to send the ID of the row item as the phx-value-id of the button

    <:action>
      <.button
        type="button"
        phx-click="toggle"
        phx-value-id = "???" #this is the wrong place to do that
        <span class="hidden sm:inline">Disable</span>
      </.button>
      <.button
        type="button"
        phx-click="delete"
        phx-value-id = "???"
        <span class="hidden sm:inline">Delete...</span>
      </.button>
    </:action>

I was able to add the phx-value-id to the corresponding <span> element by adding phx-value-id={"#{Phoenix.Param.to_param(row)}"} to the :action part of the table component

   <span
      :for={action <- @action}
      phx-value-id={"#{Phoenix.Param.to_param(row)}"}
    >
      <%= render_slot(action, row) %>
    </span>

I can think of how this can be done by using a for loop <%= for row <- @rows do %> though I’d rather like to use a table component

Any help/hints appreciated

2

Hello and welcome to the Elixir Forum!

You can use the :let attribute to pass the row into the slot just as you would with :col.

For example:

<.table rows={@rows} ...>
  <:col :let={row}><%= row.id %></:col>
  ...
  <:action :let={row}>
    <.button
      ...
      phx-click="toggle"
      phx-value-id={row.id}
      ...
    </.button>
  </:action>
</.table>

Please note that row in :let={row} is just a variable name can be anything you decide to call it, such as user if the table happened to be a list of %User{} structs etc.

Hope that helps! :slight_smile:

3

That did it. Thank you so much!
I’m feeling stupid now… :pensive:
Guess I need a better unterstanding regarding slots and attributes

1 Like