How to Add HTML Attributes to HEEx Elements?

Phoenix Forum Questions / Help
, , , ,
1

Hello I am new to Phoenix and am coming back to Elixir after a ~4 year hiatus.

I would like to add HTML attributes to HEEx elements, and they seem to do nothing - the resulting HTML does not contain an attribute.

Specifically, Im trying to add id="something" to a <.list> element. The resulting <dl> does not have any attributes I add. I have had a difficult time finding information on this online, and am wondering if its not possible.

How can HTML attributes be added to these elements?

2

Components need to be explicit about their props. If you only need an ID field then add an :id prop to your component definition. If you want to accept any valid html attribute then you’re looking for :global attributes. Check out the docs here.

1 Like
3

Thanks, Ill give those docs a read at some point. I dont think this is what I am looking for though, please pardon my naivety as Im unable to describe this well. This is not concerning live view, its just a regular .heex template file.

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.

I cant seem to find any documentation for the heex elements that “ship with” Phoenix - I have zero of my own local components.

Id like to know how to properly use the things that ship with Phoenix, like these heex elements, such as adding an attribute to <.list> or to rows in a <.table>. There is no local code for me to customize and add my own attributes.

4

You’re talking about the core components located in your_project/lib/your_project_web/components/core_components.ex, specifically list/1 and table/1 correct? The docs aren’t online for core components because they exist in that file. The fix is what I stated above. Take <.list/> for example, the only prop it defines is a slot that takes a title string. If you want it to take an ID then you need to add an ID prop to the component like so attr :id, :string, required: true, then render it in the template: <dl id={@id} class="-my-4 divide-y divide-zinc-100">...</dl>

1 Like
5

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">
1 Like
6

Thank you so much!!! I did not see this file when the app was generated. Totally new to me. This makes much more sense now.

So yes, I was talking about this core components file.

1 Like
7

Thank you, this was all new to me!