SearchApi Design System
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
<div class="overflow-x-auto rounded-lg border border-line">
  <table class="w-full text-left text-sm border-collapse">
    <thead class="bg-surface-subtle text-xs font-semibold uppercase tracking-wide text-ink-muted">
      <tr>
        <th scope="col" class="px-4 py-2.5">Name</th>
        <th scope="col" class="px-4 py-2.5">Type</th>
        <th scope="col" class="px-4 py-2.5">Description</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line">
      <tr class="align-top transition-colors hover:bg-surface-subtle">
        <th scope="row" class="px-4 py-2.5 text-left font-normal">
          <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">num</span>
        </th>
        <td class="px-4 py-2.5 font-mono text-xs text-ink-muted">integer</td>
        <td class="px-4 py-2.5 text-sm text-ink">
          <p>Number of results per page.</p>
        </td>
      </tr>
      <tr class="align-top transition-colors hover:bg-surface-subtle">
        <th scope="row" class="px-4 py-2.5 text-left font-normal">
          <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">device</span>
        </th>
        <td class="px-4 py-2.5 font-mono text-xs text-ink-muted">enum</td>
        <td class="px-4 py-2.5 text-sm text-ink">
          <p>Device to emulate for the search.</p>
          <ul class="mt-2 flex flex-wrap gap-1.5">
            <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line-strong text-ink">
              desktop<span class="sr-only"> (default)</span>
            </li>
            <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted">
              mobile
            </li>
            <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted">
              tablet
            </li>
          </ul>
        </td>
      </tr>
      <tr class="align-top transition-colors hover:bg-surface-subtle">
        <th scope="row" class="px-4 py-2.5 text-left font-normal">
          <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">safe</span>
        </th>
        <td class="px-4 py-2.5 font-mono text-xs text-ink-muted">enum</td>
        <td class="px-4 py-2.5 text-sm text-ink">
          <p>Adult content filtering level.</p>
          <ul class="mt-2 flex flex-wrap gap-1.5">
            <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted">
              active
            </li>
            <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted">
              off
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
<% headers = ParameterRowComponent::COLUMNS.map { |column| column.to_s.capitalize } %>
<%= render TableComponent.new(headers: headers) do %>
  <% parameters.each do |parameter| %>
    <%= render ParameterRowComponent.new(parameter: parameter) %>
  <% end %>
<% end %>

The default is a chip beside the description, except where a value list already marks it: among enum values the default is ringed rather than repeated.

No params configured.