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="u-dots-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>
Striped
Apply alternating row colors for improved readability.
| 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><.checkbox name="select-all" /></:col>
<:col>Lead</:col>
<:col>Stage</:col>
<:col>Contact</:col>
</.table_head>
<.table_body>
<.table_row :for={lead <- @leads} striped>
<:cell><.checkbox name="selected_leads[]" /></:cell>
<:cell><%= lead.name %></:cell>
<:cell><%= lead.stage %></:cell>
<:cell><%= lead.contact %></: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>