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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<div class="max-w-4xl mx-auto p-6">
  <h2 class="text-xl font-bold mb-4">Row HTML: Data Attributes</h2>
  <p class="text-sm text-grayscale-500 mb-4">Each row gets custom data attributes from the item.</p>
  <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>
        </tr>
      </thead>
      <tbody class="divide-y divide-primary-200 bg-white">
        <tr class="" data-id="1" data-role="admin">
          <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="" data-id="2" data-role="editor">
          <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="" data-id="3" data-role="viewer">
          <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>
        </tbody>
    </table>
  </div>
  <h2 class="text-xl font-bold mb-4 mt-8">Row HTML: Custom Classes + Striped</h2>
  <p class="text-sm text-grayscale-500 mb-4">Admin rows get bold text, merged with striped styling.</p>
  <div class="shadow-sm ring-1 ring-black/5 sm:rounded-lg overflow-x-auto">
    <table class="min-w-full divide-y divide-info-300">
      <thead class="bg-info-50 text-info-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-info-200 bg-white">
        <tr class="even:bg-info-50 font-bold text-info-800">
          <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="even:bg-info-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>
        </tr>
              
        <tr class="even:bg-info-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>
        </tr>
        </tbody>
    </table>
  </div>
  <h2 class="text-xl font-bold mb-4 mt-8">Row HTML: Index-based IDs</h2>
  <p class="text-sm text-grayscale-500 mb-4">2-argument proc receives item and index for row IDs.</p>
  <div class="shadow-sm ring-1 ring-black/5 sm:rounded-lg overflow-x-auto">
    <table class="min-w-full divide-y divide-secondary-300">
      <thead class="bg-secondary-50 text-secondary-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-secondary-200 bg-white">
        <tr class="" id="user-row-0">
          <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="" id="user-row-1">
          <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="" id="user-row-2">
          <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>
        </tbody>
    </table>
  </div>
  <h2 class="text-xl font-bold mb-4 mt-8">Row HTML: Combined with Highlighting</h2>
  <p class="text-sm text-grayscale-500 mb-4">row_html and row_highlighted work together.</p>
  <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="hover:bg-success-100 transition-colors bg-success-100 border-l-4 border-success-500" data-id="1">
          <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="hover:bg-success-100 transition-colors" data-id="2">
          <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="hover:bg-success-100 transition-colors" data-id="3">
          <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>
        </tbody>
    </table>
  </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
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
<div class="max-w-4xl mx-auto p-6">
  <h2 class="text-xl font-bold mb-4">Row HTML: Data Attributes</h2>
  <p class="text-sm text-grayscale-500 mb-4">Each row gets custom data attributes from the item.</p>
  <%
    users = [
      ::OpenStruct.new(id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Admin"),
      ::OpenStruct.new(id: 2, name: "Bob Smith", email: "bob@example.com", role: "Editor"),
      ::OpenStruct.new(id: 3, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer")
    ]
  %>
  <%= render BetterUi::Table::TableComponent.new(
    collection: users,
    variant: :primary,
    row_html: ->(user) { { data: { id: user.id, role: user.role.downcase } } }
  ) do |t| %>
    <% t.with_column(key: :name, label: "Name") %>
    <% t.with_column(key: :email, label: "Email") %>
    <% t.with_column(key: :role, label: "Role") %>
  <% end %>
  <h2 class="text-xl font-bold mb-4 mt-8">Row HTML: Custom Classes + Striped</h2>
  <p class="text-sm text-grayscale-500 mb-4">Admin rows get bold text, merged with striped styling.</p>
  <%= render BetterUi::Table::TableComponent.new(
    collection: users,
    variant: :info,
    striped: true,
    row_html: ->(user) { { class: ("font-bold text-info-800" if user.role == "Admin") } }
  ) do |t| %>
    <% t.with_column(key: :name, label: "Name") %>
    <% t.with_column(key: :email, label: "Email") %>
    <% t.with_column(key: :role, label: "Role") %>
  <% end %>
  <h2 class="text-xl font-bold mb-4 mt-8">Row HTML: Index-based IDs</h2>
  <p class="text-sm text-grayscale-500 mb-4">2-argument proc receives item and index for row IDs.</p>
  <%= render BetterUi::Table::TableComponent.new(
    collection: users,
    variant: :secondary,
    row_html: ->(_user, idx) { { id: "user-row-#{idx}" } }
  ) do |t| %>
    <% t.with_column(key: :name, label: "Name") %>
    <% t.with_column(key: :email, label: "Email") %>
    <% t.with_column(key: :role, label: "Role") %>
  <% end %>
  <h2 class="text-xl font-bold mb-4 mt-8">Row HTML: Combined with Highlighting</h2>
  <p class="text-sm text-grayscale-500 mb-4">row_html and row_highlighted work together.</p>
  <%= render BetterUi::Table::TableComponent.new(
    collection: users,
    variant: :success,
    hoverable: true,
    row_highlighted: ->(user) { user.role == "Admin" },
    row_html: ->(user) { { data: { id: user.id }, class: ("border-l-4 border-success-500" if user.role == "Admin") } }
  ) do |t| %>
    <% t.with_column(key: :name, label: "Name") %>
    <% t.with_column(key: :email, label: "Email") %>
    <% t.with_column(key: :role, label: "Role") %>
  <% end %>
</div>

No notes provided.

No params configured.