While building a new Phoenix LiveView project, I noticed the generators created an index view that included a table:

<.table
  id="items"
  rows={@streams.examples}
>
  <:col :let={{_id, example}} label="Key">
    <%= env.key %>
  </:col>
  ...

This is great for a bootstrap view, but I wanted to stylize the elements in each row.

It turns out Phoenix ships with a file called lib/app_web/components/core_components.ex that defines the HTML for a bunch of different elements.

My goal of extending that component to pass in additional classes required:

  1. adding a class attribute to the slot definition 
    slot :col, required: true do
  attr :label, :string
  attr :class, :string
end
  2. finding the existing template code, which looks like this: 
<div class="block py-4 pr-6">
  <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
  <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
    <%= render_slot(col, @row_item.(row)) %>
  </span>
</div>

and adding the new slot attribute to where the class is defined:

<span class={["relative", i == 0 && "font-semibold text-zinc-900 ", col[:class]]}>