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
<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">q<span class="text-badge-danger-ink"><span aria-hidden="true">*</span><span class="sr-only">required</span></span></span>
        </th>
        <td class="px-4 py-2.5 font-mono text-xs text-ink-muted">string</td>
        <td class="px-4 py-2.5 text-sm text-ink">
          <p>Search query; most engines accept native operators and advanced filters.</p>
        </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 read-only half of the parameter pair; ParamTableComponent's cell is the editable half. Both take the catalog's Parameter and read it, rather than six strings a caller assembles — which is what lets the reference follow the catalog with no view edited.

A row is a , so it is previewed inside the table that frames it.

Param Description Input

—