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
<div class="max-w-4xl mx-auto p-6">
  <h2 class="text-xl font-bold mb-4">Row Highlighting (Slot Mode)</h2>
  <p class="text-sm text-grayscale-500 mb-4">Specific rows can be highlighted to draw attention.</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 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" >
            Order #
          </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" >
            Customer
          </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" >
            Status
          </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" >
            Total
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-primary-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" >
            ORD-001
          </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" >
            Shipped
          </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" >
            $299.00
          </td>
        </tr>
        <tr class="bg-primary-100">
          <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" >
            ORD-002
          </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" >
            Pending Review
          </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" >
            $149.50
          </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" >
            ORD-003
          </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" >
            Delivered
          </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" >
            $75.25
          </td>
        </tr>
        <tr class="bg-primary-100">
          <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" >
            ORD-004
          </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" >
            Pending Review
          </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" >
            $512.00
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <h2 class="text-xl font-bold mb-4 mt-8">Row Highlighting (Collection Mode with Proc)</h2>
  <p class="text-sm text-grayscale-500 mb-4">Highlighting applied dynamically based on item data.</p>
  <div class="shadow-sm ring-1 ring-black/5 sm:rounded-lg overflow-x-auto">
    <table class="min-w-full divide-y divide-warning-300">
      <thead class="bg-warning-50 text-warning-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">
            Order #
          </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">
            Customer
          </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">
            Status
          </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">
            Total
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-warning-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">ORD-001</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">Shipped</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">$299.00</td>
        </tr>
              
        <tr class="bg-warning-100">
          <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">ORD-002</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">Pending Review</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">$149.50</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">ORD-003</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">Delivered</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">$75.25</td>
        </tr>
              
        <tr class="bg-warning-100">
          <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">ORD-004</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">Pending Review</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">$512.00</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 Highlighting (Slot Mode)</h2>
  <p class="text-sm text-grayscale-500 mb-4">Specific rows can be highlighted to draw attention.</p>
  <%= render BetterUi::Table::TableComponent.new(variant: :primary) do |t| %>
    <% t.with_header do |h| %>
      <% h.with_cell(label: "Order #") %>
      <% h.with_cell(label: "Customer") %>
      <% h.with_cell(label: "Status") %>
      <% h.with_cell(label: "Total", align: :right) %>
    <% end %>
    <% t.with_row do |r| %>
      <% r.with_cell { "ORD-001" } %>
      <% r.with_cell { "Alice Johnson" } %>
      <% r.with_cell { "Shipped" } %>
      <% r.with_cell(align: :right) { "$299.00" } %>
    <% end %>
    <% t.with_row(highlighted: true) do |r| %>
      <% r.with_cell { "ORD-002" } %>
      <% r.with_cell { "Bob Smith" } %>
      <% r.with_cell { "Pending Review" } %>
      <% r.with_cell(align: :right) { "$149.50" } %>
    <% end %>
    <% t.with_row do |r| %>
      <% r.with_cell { "ORD-003" } %>
      <% r.with_cell { "Charlie Brown" } %>
      <% r.with_cell { "Delivered" } %>
      <% r.with_cell(align: :right) { "$75.25" } %>
    <% end %>
    <% t.with_row(highlighted: true) do |r| %>
      <% r.with_cell { "ORD-004" } %>
      <% r.with_cell { "Diana Prince" } %>
      <% r.with_cell { "Pending Review" } %>
      <% r.with_cell(align: :right) { "$512.00" } %>
    <% end %>
  <% end %>
  <h2 class="text-xl font-bold mb-4 mt-8">Row Highlighting (Collection Mode with Proc)</h2>
  <p class="text-sm text-grayscale-500 mb-4">Highlighting applied dynamically based on item data.</p>
  <%
    orders = [
      ::OpenStruct.new(number: "ORD-001", customer: "Alice Johnson", status: "Shipped", total: "$299.00", pending: false),
      ::OpenStruct.new(number: "ORD-002", customer: "Bob Smith", status: "Pending Review", total: "$149.50", pending: true),
      ::OpenStruct.new(number: "ORD-003", customer: "Charlie Brown", status: "Delivered", total: "$75.25", pending: false),
      ::OpenStruct.new(number: "ORD-004", customer: "Diana Prince", status: "Pending Review", total: "$512.00", pending: true)
    ]
  %>
  <%= render BetterUi::Table::TableComponent.new(
    collection: orders,
    variant: :warning,
    row_highlighted: ->(item) { item.pending }
  ) do |t| %>
    <% t.with_column(key: :number, label: "Order #") %>
    <% t.with_column(key: :customer, label: "Customer") %>
    <% t.with_column(key: :status, label: "Status") %>
    <% t.with_column(key: :total, label: "Total", align: :right) %>
  <% end %>
</div>

No notes provided.

No params configured.