Polaris ViewComponents

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
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
<div class="Polaris-LegacyCard Polaris-LegacyCard--withoutTitle">
  <div class="Polaris-IndexTable">
    <div class="Polaris-IndexTable-ScrollContainer">
      <table class="Polaris-IndexTable__Table">
        <thead>
          <tr>
            <th class="Polaris-IndexTable__TableHeading">
              Name
            </th>
            <th class="Polaris-IndexTable__TableHeading">
              Location
            </th>
            <th class="Polaris-IndexTable__TableHeading">
              Order count
            </th>
            <th class="Polaris-IndexTable__TableHeading">
              Amount spent
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
            <td class="Polaris-IndexTable__TableCell">
              <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--semibold">
                Mae Jemison
              </span>
            </td>
              
            <td class="Polaris-IndexTable__TableCell">
              Decatur, USA
            </td>
              
            <td class="Polaris-IndexTable__TableCell">
              20
            </td>
              
            <td class="Polaris-IndexTable__TableCell">
              $2,400
            </td>
          </tr>
          
          <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
            <td class="Polaris-IndexTable__TableCell">
              <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--semibold">
                Ellen Ochoa
              </span>
            </td>
              
            <td class="Polaris-IndexTable__TableCell">
              Los Angeles, USA
            </td>
              
            <td class="Polaris-IndexTable__TableCell">
              30
            </td>
              
            <td class="Polaris-IndexTable__TableCell">
              $140
            </td>
          </tr>
      </tbody>
      </table>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<% data = [
  { name: "Mae Jemison", location: "Decatur, USA", orders: 20, amount_spent: "$2,400" },
  { name: "Ellen Ochoa", location: "Los Angeles, USA", orders: 30, amount_spent: "$140" },
] %>
<%= polaris_card(sectioned: false) do %>
  <%= polaris_index_table(data) do |table| %>
    <% table.with_column("Name") do |row| %>
      <%= polaris_text_strong { row[:name] } %>
    <% end %>
    <% table.with_column("Location") do |row| %>
      <%= row[:location] %>
    <% end %>
    <% table.with_column("Order count") do |row| %>
      <%= row[:orders] %>
    <% end %>
    <% table.with_column("Amount spent") do |row| %>
      <%= row[:amount_spent] %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

No params configured.