Vitrail
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
<div class="vt-table--container">
<table class="vt-table">
  <thead class="vt-table--head">
    <tr>
      <th class="vt-table--header" scope="col" > # </th>
      <th class="vt-table--header" scope="col" > Name </th>
      <th class="vt-table--header" scope="col" > Email </th>
    </tr>
    <tbody class="vt-table--body">
      <tr class="vt-table--row group" >  
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/1">
            1
          </a></td>
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/1">
            Alice
          </a></td>
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/1">
            alice@example.com
          </a></td>
      </tr>
      <tr class="vt-table--row group" >  
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/2">
            2
          </a></td>
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/2">
            Bob
          </a></td>
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/2">
            bob@example.com
          </a></td>
      </tr>
      <tr class="vt-table--row group" >  
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/3">
            3
          </a></td>
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/3">
            Charlie
          </a></td>
        <td class="vt-table--division vt-table--division-link-to-container" >
          <a class="vt-table--division-link-to" href="/users/3">
            charlie@example.com
          </a></td>
      </tr>
    </tbody>
  </table>
</div>

No params configured.

Table with link on each row

Usage:

table.with_row(link_to: your_path_helper) do |row|
1
2
3
4
5
6
7
8
9
10
11
12
13
<%= vt_table do |table| %>
  <% table.with_header.with_content("#") %>
  <% table.with_header.with_content("Name") %>
  <% table.with_header.with_content("Email") %>
  <% users.each do |user| %>
    <% table.with_row(link_to: "/users/#{user.id}") do |row| %>
      <% row.with_division.with_content(user.id) %>
      <% row.with_division.with_content(user.name) %>
      <% row.with_division.with_content(user.email) %>
    <% end %>
  <% end %>
<% end %>