Moon Liveview Library

Table

Default Open in playground
IDUsernameIs Unicorn?EmailStatusLatest Deposit
#1 Alice Smith #1 not [email protected] Pending verification 320 EURO
#2 Carlos Rivera #2 yes [email protected] Premium member 1500 EURO
#3 Eva Müller #3 not [email protected] Account locked 87 EURO
#4 Tom Lee #4 yes [email protected] New user 230 EURO
#5 Nina Patel #5 not [email protected] VIP 899 EURO
#6 John Doe #6 yes [email protected] Status 6 694 EURO
#7 George Wang #7 not [email protected] Suspended 0 EURO
#8 Lena Novak #8 yes [email protected] Status 8 420 EURO
#9 Omar Farah #9 not [email protected] Active 310 EURO
#10 Sofia Rossi #10 yes [email protected] Status 10 1250 EURO 
<.table
  id="table-single-default"
  rows={[%{id: "#1", status: "Pending verification", username: "Alice Smith #1", email: "[email protected]", is_unicorn: false, latest_deposit: "320 EURO"}, %{id: "#2", status: "Premium member", username: "Carlos Rivera #2", email: "[email protected]", is_unicorn: true, latest_deposit: "1500 EURO"}, %{id: "#3", status: "Account locked", username: "Eva Müller #3", email: "[email protected]", is_unicorn: false, latest_deposit: "87 EURO"}, %{id: "#4", status: "New user", username: "Tom Lee #4", email: "[email protected]", is_unicorn: true, latest_deposit: "230 EURO"}, %{id: "#5", status: "VIP", username: "Nina Patel #5", email: "[email protected]", is_unicorn: false, latest_deposit: "899 EURO"}, %{id: "#6", status: "Status 6", username: "John Doe #6", email: "[email protected]", is_unicorn: true, latest_deposit: "694 EURO"}, %{id: "#7", status: "Suspended", username: "George Wang #7", email: "[email protected]", is_unicorn: false, latest_deposit: "0 EURO"}, %{id: "#8", status: "Status 8", username: "Lena Novak #8", email: "[email protected]", is_unicorn: true, latest_deposit: "420 EURO"}, %{id: "#9", status: "Active", username: "Omar Farah #9", email: "[email protected]", is_unicorn: false, latest_deposit: "310 EURO"}, %{id: "#10", status: "Status 10", username: "Sofia Rossi #10", email: "[email protected]", is_unicorn: true, latest_deposit: "1250 EURO"}]}
>
  <:col :let={row} label="ID" >
  {row.id}
  </:col>
  <:col :let={row} label="Username" >
  {row.username}
  </:col>
  <:col :let={row} label="Is Unicorn?" >
  <%= if row.is_unicorn, do: "yes", else: "not" %>
  </:col>
  <:col :let={row} label="Email" >
  {row.email}
  </:col>
  <:col :let={row} label="Status" >
  {row.status}
  </:col>
  <:col :let={row} label="Latest Deposit" >
  {row.latest_deposit}
  </:col>
</.table>