Table
Default
Invoice | Status | Method | Amount |
---|---|---|---|
INV001 | Paid |
Credit Card | $250.00 |
INV002 | Pending |
PayPal | $150.00 |
INV003 | Unpaid |
Bank Transfer | $350.00 |
INV004 | Paid |
Credit Card | $450.00 |
INV005 | Paid |
PayPal | $550.00 |
INV006 | Pending |
Bank Transfer | $200.00 |
INV007 | Unpaid |
Credit Card | $300.00 |
<%= 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 %>
With Border
Invoice | Status | Method | Amount | |
---|---|---|---|---|
INV001 | Paid |
Credit Card | $250.00 |
|
INV002 | Pending |
PayPal | $150.00 |
|
INV003 | Unpaid |
Bank Transfer | $350.00 |
|
INV004 | Paid |
Credit Card | $450.00 |
|
INV005 | Paid |
PayPal | $550.00 |
|
INV006 | Pending |
Bank Transfer | $200.00 |
|
INV007 | Unpaid |
Credit Card | $300.00 |
|
<%= 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 %>
Compact
Invoice | Status | Method | Amount |
---|---|---|---|
INV001 | Paid |
Credit Card | $250.00 |
INV002 | Pending |
PayPal | $150.00 |
INV003 | Unpaid |
Bank Transfer | $350.00 |
INV004 | Paid |
Credit Card | $450.00 |
INV005 | Paid |
PayPal | $550.00 |
INV006 | Pending |
Bank Transfer | $200.00 |
INV007 | Unpaid |
Credit Card | $300.00 |
<%= 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 %>
Without Header
Eduardo Castillo | Member |
Role
Member
Editor
Owner
| |
Emily Johnson | Editor |
Role
Member
Editor
Owner
| |
Brianna Washington | Member |
Role
Member
Editor
Owner
| |
Huan Zhang | Member |
Role
Member
Editor
Owner
| |
Isabella Garcia | Owner |
Role
Member
Editor
Owner
| |
Michael O'Connor | Editor |
Role
Member
Editor
Owner
| |
Jun Park | Member |
Role
Member
Editor
Owner
| |
Marcus Brown | Member |
Role
Member
Editor
Owner
|
<%= 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 %>
Arguments
Argument | Values | Default | Notes |
---|---|---|---|
border | true, false | false | |
density | :regular, :compact | :regular |