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
<div class="max-w-4xl mx-auto p-6">
  <h2 class="text-xl font-bold mb-4">Striped Table</h2>
  <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 class="">
          <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" >
            #
          </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" >
            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" >
            Department
          </th>
          <th class="px-3 py-3.5 text-sm font-semibold align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" scope="col" >
            Salary
          </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" >
            1
          </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 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" >
            Engineering
          </td>
          <td class="px-3 py-4 text-sm text-black align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" >
            $120,000
          </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" >
            2
          </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 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" >
            Marketing
          </td>
          <td class="px-3 py-4 text-sm text-black align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" >
            $95,000
          </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" >
            3
          </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 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" >
            Design
          </td>
          <td class="px-3 py-4 text-sm text-black align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" >
            $105,000
          </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" >
            4
          </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 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" >
            Engineering
          </td>
          <td class="px-3 py-4 text-sm text-black align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" >
            $130,000
          </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" >
            5
          </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" >
            Eve Wilson
          </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" >
            Sales
          </td>
          <td class="px-3 py-4 text-sm text-black align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" >
            $88,000
          </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" >
            6
          </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" >
            Frank Castle
          </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" >
            Operations
          </td>
          <td class="px-3 py-4 text-sm text-black align-middle text-right first:ps-4 first:pe-3 sm:first:ps-6 last:ps-3 last:pe-4 sm:last:pe-6" >
            $92,000
          </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
<div class="max-w-4xl mx-auto p-6">
  <h2 class="text-xl font-bold mb-4">Striped Table</h2>
  <%= render BetterUi::Table::TableComponent.new(variant: :primary, striped: true) do |t| %>
    <% t.with_header do |h| %>
      <% h.with_cell(label: "#") %>
      <% h.with_cell(label: "Name") %>
      <% h.with_cell(label: "Department") %>
      <% h.with_cell(label: "Salary", align: :right) %>
    <% end %>
    <% [
      ["1", "Alice Johnson", "Engineering", "$120,000"],
      ["2", "Bob Smith", "Marketing", "$95,000"],
      ["3", "Charlie Brown", "Design", "$105,000"],
      ["4", "Diana Prince", "Engineering", "$130,000"],
      ["5", "Eve Wilson", "Sales", "$88,000"],
      ["6", "Frank Castle", "Operations", "$92,000"]
    ].each do |row_data| %>
      <% t.with_row do |r| %>
        <% row_data.each_with_index do |cell, i| %>
          <% if i == 3 %>
            <% r.with_cell(align: :right) { cell } %>
          <% else %>
            <% r.with_cell { cell } %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.