Anchor ViewComponents

Pages

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="overflow-auto">
  <table class="text-left text-base w-full">
    <thead>
      <tr class="border-b border-subdued">
        <th class="font-semibold px-2 py-3" scope="col">
          Name
        </th>
          
        <th class="font-semibold px-2 py-3" scope="col">
          ID
        </th>
          
        <th class="font-semibold px-2 py-3" scope="col">
          <span class="block text-right">Actions</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-subdued" data-testid="tr-1">
        <td class="relative px-2 py-3" style="" data-testid="tr-1-td-0">Name 1</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-1-td-1">1</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-1-td-2">
          <div class="flex justify-end">
            <div class="contents" data-controller="popover">
              <button data-popover-target="button" popovertarget="name-1-action-menu" class="rounded-sm p-0.5 hover:bg-neutral" aria-label="name 1 actions"><!-- Source: Iconoir, added via `bin/add_icon` -->
                <svg width="20" height="20" viewbox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
                  <path d="M20 12.5C20.2761 12.5 20.5 12.2761 20.5 12C20.5 11.7239 20.2761 11.5 20 11.5C19.7239 11.5 19.5 11.7239 19.5 12C19.5 12.2761 19.7239 12.5 20 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 12.5C4.27614 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.27614 11.5 4 11.5C3.72386 11.5 3.5 11.7239 3.5 12C3.5 12.2761 3.72386 12.5 4 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="name-1-action-menu">
                <ul>
                  <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a href="#">Edit</a></li>
                </ul>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="border-b border-subdued" data-testid="tr-2">
        <td class="relative px-2 py-3" style="" data-testid="tr-2-td-0">Name 2</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-2-td-1">2</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-2-td-2">
          <div class="flex justify-end">
            <div class="contents" data-controller="popover">
              <button data-popover-target="button" popovertarget="name-2-action-menu" class="rounded-sm p-0.5 hover:bg-neutral" aria-label="name 2 actions"><!-- Source: Iconoir, added via `bin/add_icon` -->
                <svg width="20" height="20" viewbox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
                  <path d="M20 12.5C20.2761 12.5 20.5 12.2761 20.5 12C20.5 11.7239 20.2761 11.5 20 11.5C19.7239 11.5 19.5 11.7239 19.5 12C19.5 12.2761 19.7239 12.5 20 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 12.5C4.27614 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.27614 11.5 4 11.5C3.72386 11.5 3.5 11.7239 3.5 12C3.5 12.2761 3.72386 12.5 4 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="name-2-action-menu">
                <ul>
                  <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a href="#">Edit</a></li>
                </ul>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="border-b border-subdued" data-testid="tr-3">
        <td class="relative px-2 py-3" style="" data-testid="tr-3-td-0">Name 3</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-3-td-1">3</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-3-td-2">
          <div class="flex justify-end">
            <div class="contents" data-controller="popover">
              <button data-popover-target="button" popovertarget="name-3-action-menu" class="rounded-sm p-0.5 hover:bg-neutral" aria-label="name 3 actions"><!-- Source: Iconoir, added via `bin/add_icon` -->
                <svg width="20" height="20" viewbox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
                  <path d="M20 12.5C20.2761 12.5 20.5 12.2761 20.5 12C20.5 11.7239 20.2761 11.5 20 11.5C19.7239 11.5 19.5 11.7239 19.5 12C19.5 12.2761 19.7239 12.5 20 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 12.5C4.27614 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.27614 11.5 4 11.5C3.72386 11.5 3.5 11.7239 3.5 12C3.5 12.2761 3.72386 12.5 4 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="name-3-action-menu">
                <ul>
                  <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a href="#">Edit</a></li>
                </ul>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="border-b border-subdued" data-testid="tr-4">
        <td class="relative px-2 py-3" style="" data-testid="tr-4-td-0">Name 4</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-4-td-1">4</td>
        <td class="relative px-2 py-3" style="" data-testid="tr-4-td-2">
          <div class="flex justify-end">
            <div class="contents" data-controller="popover">
              <button data-popover-target="button" popovertarget="name-4-action-menu" class="rounded-sm p-0.5 hover:bg-neutral" aria-label="name 4 actions"><!-- Source: Iconoir, added via `bin/add_icon` -->
                <svg width="20" height="20" viewbox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
                  <path d="M20 12.5C20.2761 12.5 20.5 12.2761 20.5 12C20.5 11.7239 20.2761 11.5 20 11.5C19.7239 11.5 19.5 11.7239 19.5 12C19.5 12.2761 19.7239 12.5 20 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4 12.5C4.27614 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.27614 11.5 4 11.5C3.72386 11.5 3.5 11.7239 3.5 12C3.5 12.2761 3.72386 12.5 4 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="name-4-action-menu">
                <ul>
                  <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a href="#">Edit</a></li>
                </ul>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</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
<%= anchor_table(data:) do |table|
  table.with_column(header: "Name", value: -> { _1.name.capitalize })
  table.with_column(header: "ID", value: :id)
  table.with_column(
    header: ->(table) do
      tag.span("Actions", class: "block text-right")
    end,
    value: lambda do |user|
      tag.div class: "flex justify-end" do
        action_menu_id = "#{user.name.parameterize}-action-menu"
        anchor_action_menu(id: action_menu_id) do |menu|
          menu.with_trigger do
            tag.button(
              anchor_icon(icon: "more-horiz", size: :medium),
              **popover_trigger_attributes(
                popovertarget: action_menu_id
              ),
              class: "rounded-sm p-0.5 hover:bg-neutral",
              aria: { label: "#{user.name} actions" }
            )
          end
          menu.with_item do
            link_to("Edit", "#")
          end
        end
      end
    end
  )
end %>

No notes provided.

No params configured.