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
<div class="flex flex-col rounded-lg text-base bg-white border border-grayscale-300 text-grayscale-900 shadow-sm" >
  <div class="p-6 border-b border-grayscale-200">
    Data Table
  </div>
  <div class="">
    <table class='w-full'>
      <thead class='bg-gray-50'>
        <tr>
          <th class='px-6 py-3 text-left'>Name</th>
          <th class='px-6 py-3 text-left'>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class='border-t'>
          <td class='px-6 py-4'>Item 1</td>
          <td class='px-6 py-4'>Active</td>
        </tr>
        <tr class='border-t'>
          <td class='px-6 py-4'>Item 2</td>
          <td class='px-6 py-4'>Pending</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
1
2
3
4
5
6
render BetterUi::CardComponent.new(body_padding: false, style: :bordered) do |card|
  card.with_header { "Data Table" }
  card.with_body do
    "<table class='w-full'><thead class='bg-gray-50'><tr><th class='px-6 py-3 text-left'>Name</th><th class='px-6 py-3 text-left'>Status</th></tr></thead><tbody><tr class='border-t'><td class='px-6 py-4'>Item 1</td><td class='px-6 py-4'>Active</td></tr><tr class='border-t'><td class='px-6 py-4'>Item 2</td><td class='px-6 py-4'>Pending</td></tr></tbody></table>".html_safe
  end
end

No notes provided.

No params configured.