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
<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">
          Button
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-subdued hover:bg-neutral hover:cursor-pointer" data-testid="tr-1">
        <td class="relative px-2 py-3" style="" data-testid="tr-1-td-0"><a class="underline hover:no-underline focus:no-underline text-accent hover:text-accent-hover relative z-10" href="javascript:alert('row link')">Name 1</a><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-1-td-1"><span class="relative z-10">1</span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-1-td-2"><span class="relative z-10"><button class="btn" onClick="alert('button click')">Click me</button>
          </span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
      </tr>
      <tr class="border-b border-subdued hover:bg-neutral hover:cursor-pointer" data-testid="tr-2">
        <td class="relative px-2 py-3" style="" data-testid="tr-2-td-0"><a class="underline hover:no-underline focus:no-underline text-accent hover:text-accent-hover relative z-10" href="javascript:alert('row link')">Name 2</a><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-2-td-1"><span class="relative z-10">2</span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-2-td-2"><span class="relative z-10"><button class="btn" onClick="alert('button click')">Click me</button>
          </span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
      </tr>
      <tr class="border-b border-subdued hover:bg-neutral hover:cursor-pointer" data-testid="tr-3">
        <td class="relative px-2 py-3" style="" data-testid="tr-3-td-0"><a class="underline hover:no-underline focus:no-underline text-accent hover:text-accent-hover relative z-10" href="javascript:alert('row link')">Name 3</a><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-3-td-1"><span class="relative z-10">3</span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-3-td-2"><span class="relative z-10"><button class="btn" onClick="alert('button click')">Click me</button>
          </span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
      </tr>
      <tr class="border-b border-subdued hover:bg-neutral hover:cursor-pointer" data-testid="tr-4">
        <td class="relative px-2 py-3" style="" data-testid="tr-4-td-0"><a class="underline hover:no-underline focus:no-underline text-accent hover:text-accent-hover relative z-10" href="javascript:alert('row link')">Name 4</a><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-4-td-1"><span class="relative z-10">4</span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
        <td class="relative px-2 py-3" style="" data-testid="tr-4-td-2"><span class="relative z-10"><button class="btn" onClick="alert('button click')">Click me</button>
          </span><a aria-hidden="true" class="absolute inset-0" tabindex="-1" href="javascript:alert('row link')"></a></td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
anchor_table(
  data:,
  rows_link_to: ->(_record) { "javascript:alert('row link')" }
) do |table|
  table.with_column(header: "Name", value: -> { it.name.capitalize })
  table.with_column(header: "ID", value: :id)
  table.with_column(
    header: "Button",
    value: ->(_) { <<~HTML.html_safe }
      <button class="btn" onClick="alert('button click')">Click me</button>
    HTML
  )
end

No notes provided.

No params configured.