Phoenix Storybook

Table

Renders a table with generic styling.

Read more Read less

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id">{user.id}</:col>
  <:col :let={user} label="username">{user.username}</:col>
</.table>
Default Open in playground
IDFirst nameLast nameCity
1
Jean
Dupont
Paris
2
Sam
Smith
NY 
<.table
  id="table-single-default"
  rows={[%{id: 1, city: "Paris", last_name: "Dupont", first_name: "Jean"}, %{id: 2, city: "NY", last_name: "Smith", first_name: "Sam"}]}
>
  <:col :let={user} label="ID">
    <%= user.id %>
  </:col>
  <:col :let={user} label="First name">
    <%= user.first_name %>
  </:col>
  <:col :let={user} label="Last name">
    <%= user.last_name %>
  </:col>
  <:col :let={user} label="City">
    <%= user.city %>
  </:col>
</.table>
Applying functions to row items Open in playground
IDFirst nameLast nameCity
1
Jean
DUPONT
Paris
2
Sam
SMITH
NY 
<.table
  id="table-single-with-function"
  rows={[%{id: 1, city: "Paris", last_name: "Dupont", first_name: "Jean"}, %{id: 2, city: "NY", last_name: "Smith", first_name: "Sam"}]}
  row_id={&"user-#{&1.id}"}
  row_item={&%{&1 | last_name: String.upcase(&1.last_name)}}
>
  <:col :let={user} label="ID">
    <%= user.id %>
  </:col>
  <:col :let={user} label="First name">
    <%= user.first_name %>
  </:col>
  <:col :let={user} label="Last name">
    <%= user.last_name %>
  </:col>
  <:col :let={user} label="City">
    <%= user.city %>
  </:col>
</.table>
With an action slot Open in playground
IDFirst nameLast nameCity Actions
1
Jean
Dupont
Paris
2
Sam
Smith
NY 
<.table
  id="table-single-with-actions"
  rows={[%{id: 1, city: "Paris", last_name: "Dupont", first_name: "Jean"}, %{id: 2, city: "NY", last_name: "Smith", first_name: "Sam"}]}
>
  <:action>
    <.button>Show</.button>
  </:action>
  <:col :let={user} label="ID">
    <%= user.id %>
  </:col>
  <:col :let={user} label="First name">
    <%= user.first_name %>
  </:col>
  <:col :let={user} label="Last name">
    <%= user.last_name %>
  </:col>
  <:col :let={user} label="City">
    <%= user.city %>
  </:col>
</.table>