How to Add HTML Attributes to HEEx Elements?

[barkerja]

@stratigos

I also want to target a table row element, and Id like to add an id="" attribute to each row in my table. The heex <.table> . Anything Ive read in Phoenix.Component — Phoenix LiveView v0.20.14 does not reveal to me how I can add an id or a class etc to each tr that results when rendered.

If you’re using the table component that ships with the generated phoenix core components, then there is a row_id attribute that can take a function to generate an ID for each row (tr).

Example:

<.table id="users" rows={@users} row_id={fn row -> "row-#{row.id}" end}>
  <:col :let={user} label="id"><%= user.id %></:col>
  <:col :let={user} label="username"><%= user.username %></:col>
</.table>

If you look at the component, you can see how that is used:

<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">