VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="relative w-full overflow-x-auto rounded-md border border-border">
  <table class="w-full caption-bottom text-sm">
    <thead class="border-b border-border bg-muted/50">
      <tr>
        <th scope="col" class="h-10 px-2 align-middle font-medium text-foreground whitespace-nowrap text-left">Customer</th>
        <th scope="col" class="h-10 px-2 align-middle font-medium text-foreground whitespace-nowrap text-left">Plan</th>
        <th scope="col" class="h-10 px-2 align-middle font-medium text-foreground whitespace-nowrap text-right">Seats</th>
      </tr>
    </thead>
    <tbody class="[&_tr:last-child]:border-0">
      <tr class="border-b border-border transition-colors hover:bg-muted/50">
        <td class="p-2 align-middle text-left">Aditi Rao</td>
        <td class="p-2 align-middle text-left">Business</td>
        <td class="p-2 align-middle text-right">24</td>
      </tr>
      <tr class="border-b border-border transition-colors hover:bg-muted/50">
        <td class="p-2 align-middle text-left">Arjun Nair</td>
        <td class="p-2 align-middle text-left">Team</td>
        <td class="p-2 align-middle text-right">8</td>
      </tr>
      <tr class="border-b border-border transition-colors hover:bg-muted/50">
        <td class="p-2 align-middle text-left">Chitra Menon</td>
        <td class="p-2 align-middle text-left">Free</td>
        <td class="p-2 align-middle text-right">1</td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%= render(UI::Table.new) do |table| %>
  <% table.with_head do |head| %>
    <% head.with_column { "Customer" } %>
    <% head.with_column { "Plan" } %>
    <% head.with_column(align: :end) { "Seats" } %>
  <% end %>
  <% [ [ "Aditi Rao", "Business", "24" ], [ "Arjun Nair", "Team", "8" ],
       [ "Chitra Menon", "Free", "1" ] ].each do |name, plan, seats| %>
    <% table.with_row do |row| %>
      <% row.with_cell { name } %>
      <% row.with_cell { plan } %>
      <% row.with_cell(align: :end) { seats } %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

No params configured.