BetterUi Components

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<div class="max-w-4xl mx-auto p-6 space-y-8">
  <h2 class="text-xl font-bold mb-4">Collection Mode</h2>
  <div>
    <h3 class="text-lg font-semibold mb-2">Basic Collection</h3>
    <div class="shadow-sm ring-1 ring-black/5 sm:rounded-lg overflow-x-auto">
      <table class="min-w-full divide-y divide-primary-300">
        <thead class="bg-primary-50 text-primary-900">
          <tr>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Name
            </th>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Email
            </th>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Role
            </th>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-center first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Status
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-primary-200 bg-white">
          <tr class="even:bg-primary-50">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Alice Johnson</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">alice@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Admin</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-center first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Active</td>
          </tr>
              
          <tr class="even:bg-primary-50">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Bob Smith</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">bob@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Editor</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-center first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Active</td>
          </tr>
              
          <tr class="even:bg-primary-50">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Charlie Brown</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">charlie@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Viewer</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-center first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Inactive</td>
          </tr>
              
          <tr class="even:bg-primary-50">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Diana Prince</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">diana@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Admin</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-center first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Active</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-2">Collection with Auto-humanized Labels</h3>
    <div class="shadow-sm ring-1 ring-black/5 sm:rounded-lg overflow-x-auto">
      <table class="min-w-full divide-y divide-success-300">
        <thead class="bg-success-50 text-success-900">
          <tr>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Name
            </th>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Email
            </th>
            <th class="px-3 py-3.5 text-sm font-semibold align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col">
              Role
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-success-200 bg-white">
          <tr class="">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Alice Johnson</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">alice@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">admin</td>
          </tr>
              
          <tr class="">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Bob Smith</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">bob@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">editor</td>
          </tr>
              
          <tr class="">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Charlie Brown</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">charlie@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">viewer</td>
          </tr>
              
          <tr class="">
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">Diana Prince</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">diana@example.com</td>
            <td class="px-3 py-4 text-sm text-black align-middle text-left first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6">admin</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
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
29
30
31
<%
  users = [
    ::OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "admin", active: true),
    ::OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "editor", active: true),
    ::OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "viewer", active: false),
    ::OpenStruct.new(name: "Diana Prince", email: "diana@example.com", role: "admin", active: true)
  ]
%>
<div class="max-w-4xl mx-auto p-6 space-y-8">
  <h2 class="text-xl font-bold mb-4">Collection Mode</h2>
  <div>
    <h3 class="text-lg font-semibold mb-2">Basic Collection</h3>
    <%= render BetterUi::Table::TableComponent.new(collection: users, variant: :primary, striped: true) do |t| %>
      <% t.with_column(key: :name, label: "Name") %>
      <% t.with_column(key: :email, label: "Email") %>
      <% t.with_column(key: :role, label: "Role") { |user| user.role.capitalize } %>
      <% t.with_column(key: :active, label: "Status", align: :center) { |user| user.active ? "Active" : "Inactive" } %>
    <% end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-2">Collection with Auto-humanized Labels</h3>
    <%= render BetterUi::Table::TableComponent.new(collection: users, variant: :success) do |t| %>
      <% t.with_column(key: :name) %>
      <% t.with_column(key: :email) %>
      <% t.with_column(key: :role) %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.