Table

<%= render(Zui::Table.new) do |table| %>
  <%= table.description { "A list of your recent invoices." } %>
  <%= table.header do %>
    <%= table.row do %>
      <%= table.head(class: "w-[100px]") { "Invoice" } %>
      <%= table.head { "Status" } %>
      <%= table.head { "Method" } %>
      <%= table.head(class: "text-right") { "Amount" } %>
    <% end %>
  <% end %>
  <%= table.body do %>
    <% invoices.each do |invoice| %>
      <%= table.row do %>
        <%= table.cell(class: "font-medium") { invoice[:invoice] } %>
        <%= table.cell { render(Zui::Badge.new(variant: :soft, color: badge_color_for_invoice_status(invoice[:paymentStatus])) { invoice[:paymentStatus] } ) } %>
        <%= table.cell { invoice[:paymentMethod] } %>
        <%= table.cell(class: "text-right") { invoice[:totalAmount] } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= render(Zui::Table.new(border: true)) do |table| %>
  <%= table.description { "A list of your recent invoices." } %>
  <%= table.header do %>
    <%= table.row do %>
      <%= table.head(class: "w-[100px]") { "Invoice" } %>
      <%= table.head { "Status" } %>
      <%= table.head { "Method" } %>
      <%= table.head(class: "text-right") { "Amount" } %>
      <%= table.head %>
    <% end %>
  <% end %>
  <%= table.body do %>
    <% invoices.each do |invoice| %>
      <%= table.row do %>
        <%= table.cell(class: "font-medium") { invoice[:invoice] } %>
        <%= table.cell { render(Zui::Badge.new(variant: :soft, color: badge_color_for_invoice_status(invoice[:paymentStatus])) { invoice[:paymentStatus] } ) } %>
        <%= table.cell { invoice[:paymentMethod] } %>
        <%= table.cell(class: "text-right") { invoice[:totalAmount] } %>
        <%= table.cell do %>
          <div class="flex justify-end">
          <%= zui_icon("trash-2", class: "mr-4") %>
          <%= zui_icon("pencil") %>
          </div>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= render(Zui::Table.new(density: :compact)) do |table| %>
  <%= table.description { "A list of your recent invoices." } %>
  <%= table.header do %>
    <%= table.row do %>
      <%= table.head(class: "w-[100px]") { "Invoice" } %>
      <%= table.head { "Status" } %>
      <%= table.head { "Method" } %>
      <%= table.head(class: "text-right") { "Amount" } %>
    <% end %>
  <% end %>
  <%= table.body do %>
    <% invoices.each do |invoice| %>
      <%= table.row do %>
        <%= table.cell(class: "font-medium") { invoice[:invoice] } %>
        <%= table.cell { render(Zui::Badge.new(variant: :soft, color: badge_color_for_invoice_status(invoice[:paymentStatus])) { invoice[:paymentStatus] } ) } %>
        <%= table.cell { invoice[:paymentMethod] } %>
        <%= table.cell(class: "text-right") { invoice[:totalAmount] } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= render(Zui::Table.new(wrapper_class: "overflow-initial", density: :compact)) do |table| %>
  <%= table.body do %>
    <% members.each do |member, index| %>
      <%= table.row do %>
        <%= table.cell(class: "font-medium") { zui("avatar", src: avatar_path(member), alt: "Profile Picture", shape: :square, size: :s)  } %>
        <%= table.cell { member[:name] } %>
        <%= table.cell { member[:role].titleize } %>
        <%= table.cell(class: "text-right") do %>
          <%= zui("dropdown", variant: :ghost) do |dd| %>
           <%= dd.trigger(class: "h-full") do %>
              <%= zui_icon("more-horizontal", class: "h-5 w-5") %>
            <% end %>
            <%= dd.body do |body| %>
              <%= body.title(class: "flex") { "Role" } %>
              <%= body.separator %>
              <% %w[member editor owner].each do |role| %>
                <%= body.item(icon: role_icon(role)) { role.titleize } %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>