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
<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>
      </tr>
    </thead>
    <tbody data-controller="sortable" data-testid="sortable">
      <tr class="border-b border-subdued hover:cursor-pointer" data-sortable-update-url="/sort/1" data-testid="tr-1">
        <td class="relative bg-[length:16px_16px] bg-no-repeat pl-8 pr-2 py-3 bg-[position:8px_center] px-2" style="background-image: url(/assets/icons/menu-e63efe12373a7e3fd8e2912314d9408e5a251cdddf5bc84ecf1ea629f3bae657.svg)" 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>
      </tr>
      <tr class="border-b border-subdued hover:cursor-pointer" data-sortable-update-url="/sort/2" data-testid="tr-2">
        <td class="relative bg-[length:16px_16px] bg-no-repeat pl-8 pr-2 py-3 bg-[position:8px_center] px-2" style="background-image: url(/assets/icons/menu-e63efe12373a7e3fd8e2912314d9408e5a251cdddf5bc84ecf1ea629f3bae657.svg)" 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>
      </tr>
      <tr class="border-b border-subdued hover:cursor-pointer" data-sortable-update-url="/sort/3" data-testid="tr-3">
        <td class="relative bg-[length:16px_16px] bg-no-repeat pl-8 pr-2 py-3 bg-[position:8px_center] px-2" style="background-image: url(/assets/icons/menu-e63efe12373a7e3fd8e2912314d9408e5a251cdddf5bc84ecf1ea629f3bae657.svg)" 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>
      </tr>
      <tr class="border-b border-subdued hover:cursor-pointer" data-sortable-update-url="/sort/4" data-testid="tr-4">
        <td class="relative bg-[length:16px_16px] bg-no-repeat pl-8 pr-2 py-3 bg-[position:8px_center] px-2" style="background-image: url(/assets/icons/menu-e63efe12373a7e3fd8e2912314d9408e5a251cdddf5bc84ecf1ea629f3bae657.svg)" 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>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
anchor_table(
  data:,
  sortable: true,
  sort_url: ->(data) { "/sort/#{data.id}" }
) do |table|
  table.with_column(header: "Name", value: -> { it.name.capitalize })
  table.with_column(header: "ID", value: :id)
end

No notes provided.

No params configured.