Components

Table

Organize and display data in structured layouts.

Lead Stage Contact
Alice Smith New alice.smith@example.com
Bob Johnson In Progress bob.johnson@example.com
Carol Williams Completed carol.williams@example.com
David Brown Urgent david.brown@example.com 
<.table>
  <.table_head>
    <:col>Lead</:col>
    <:col>Stage</:col>
    <:col>Contact</:col>
  </.table_head>
  <.table_body>
    <.table_row :for={lead <- @leads}>
      <:cell><%= lead.name %></:cell>
      <:cell><%= lead.stage %></:cell>
      <:cell><%= lead.contact %></:cell>
    </.table_row>
  </.table_body>
</.table>

Customization

Style table cells and content to match your design requirements.

Lead Stage Contact
Alice Smith New alice.smith@example.com
Bob Johnson In Progress bob.johnson@example.com
Carol Williams Completed carol.williams@example.com
David Brown Urgent david.brown@example.com 
<.table>
  <.table_head class="border-zinc-300 border-b-2">
    <:col class="py-2">Lead</:col>
    <:col class="py-2">Stage</:col>
    <:col class="py-2">Contact</:col>
  </.table_head>
  <.table_body>
    <.table_row :for={lead <- @leads}>
      <:cell class="py-2.5 font-semibold w-full"><%= lead.name %></:cell>
      <:cell class="py-2.5 "><%= lead.stage %></:cell>
      <:cell class="py-2.5 "><%= lead.contact %></:cell>
    </.table_row>
  </.table_body>
</.table>

Complex content

Include rich content within cells like buttons, badges, or icons.

Lead Stage Contact
Alice Smith Sales Rep
New alice.smith@example.com
Bob Johnson Sales Rep
In Progress bob.johnson@example.com
David Brown Sales Rep
Urgent david.brown@example.com 
<.table>
  <.table_head>
    <:col>Lead</:col>
    <:col>Stage</:col>
    <:col>Contact</:col>
    <:col></:col>
  </.table_head>
  <.table_body>
    <.table_row :for={%{stage: {stage, stage_color}} = lead <- @leads}>
      <:cell class="w-full flex items-center gap-2">
        <img src={lead.avatar} class="size-9 rounded-full" />
        <div class="flex flex-col gap-0.5">
          <span class="font-semibold"><%= lead.name %></span>
          <span class="text-zinc-400 text-sm/3"><%= lead.role %></span>
        </div>
      </:cell>
      <:cell>
        <.badge color={stage_color}><%= stage %></.badge>
      </:cell>
      <:cell><%= lead.contact %></:cell>
      <:cell>
        <.dropdown>
          <:toggle class="size-6 cursor-pointer rounded-md flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-zinc-800">
            <.icon name="hero-ellipsis-horizontal" class="size-5" />
          </:toggle>
          <.dropdown_link>View</.dropdown_link>
          <.dropdown_link>Edit</.dropdown_link>
          <.dropdown_link>Delete</.dropdown_link>
        </.dropdown>
      </:cell>
    </.table_row>
  </.table_body>
</.table>

Clickable rows

Enable row interactions with hover effects and click actions.

Lead Stage Contact
Alice Smith New alice.smith@example.com
Bob Johnson In Progress bob.johnson@example.com
Carol Williams Completed carol.williams@example.com
David Brown Urgent david.brown@example.com 
<.table>
  <.table_head>
    <:col>Lead</:col>
    <:col>Stage</:col>
    <:col>Contact</:col>
  </.table_head>
  <.table_body>
    <.table_row
      :for={lead <- @leads}
      id={"lead-#{lead.id}"}
      phx-click="remove-lead"
      phx-value-id={lead.id}
    >
      <:cell><%= lead.name %></:cell>
      <:cell><%= lead.stage %></:cell>
      <:cell><%= lead.contact %></:cell>
    </.table_row>
  </.table_body>
</.table>

Clickable headers

Add sorting functionality to column headers.

Lead
Priority
Contact
Alice Smith 2 alice.smith@example.com
Bob Johnson 3 bob.johnson@example.com
Carol Williams 1 carol.williams@example.com
David Brown 4 david.brown@example.com 
<.table>
  <.table_head>
    <:col phx-click="sort" phx-value-column="name">
      <div class="flex items-center gap-1">
        Lead
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 text-zinc-400 dark:text-zinc-600">
          <path fill="currentColor" d="M11 7H5l3-4z" />
          <path fill="currentColor" d="M5 9h6l-3 4z" />
        </svg>
      </div>
    </:col>
    <:col phx-click="sort" phx-value-column="stage">
      <div class="flex items-center gap-1">
        Stage
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 text-zinc-400 dark:text-zinc-600">
          <path fill="currentColor" d="M11 7H5l3-4z" />
          <path fill="currentColor" d="M5 9h6l-3 4z" />
        </svg>
      </div>
    </:col>
    <:col phx-click="sort" phx-value-column="contact">
      <div class="flex items-center gap-1">
        Contact
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 text-zinc-400 dark:text-zinc-600">
          <path fill="currentColor" d="M11 7H5l3-4z" />
          <path fill="currentColor" d="M5 9h6l-3 4z" />
        </svg>
      </div>
    </:col>
  </.table_head>
  <.table_body>
    <.table_row :for={lead <- @leads}>
      <:cell><%= lead.name %></:cell>
      <:cell><%= lead.stage %></:cell>
      <:cell><%= lead.contact %></:cell>
    </.table_row>
  </.table_body>
</.table>