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
<div class="overflow-x-auto rounded-lg border border-line">
  <table class="w-full text-left text-sm border-collapse">
    <caption class="sr-only">Plans</caption>
    <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">Plan</th>
        <th scope="col" class="px-4 py-2.5">Searches</th>
        <th scope="col" class="px-4 py-2.5">Price</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line">
      <tr class="border-t border-line">
        <td class="px-4 py-2.5 text-ink">Free</td>
        <td class="px-4 py-2.5 text-ink-muted">100</td>
        <td class="px-4 py-2.5 text-ink-muted">$0</td>
      </tr>
      <tr class="border-t border-line">
        <td class="px-4 py-2.5 text-ink">Starter</td>
        <td class="px-4 py-2.5 text-ink-muted">10,000</td>
        <td class="px-4 py-2.5 text-ink-muted">$40</td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<%= render TableComponent.new(headers: [ "Plan", "Searches", "Price" ], caption: "Plans") do %>
  <tr class="border-t border-line">
    <td class="px-4 py-2.5 text-ink">Free</td>
    <td class="px-4 py-2.5 text-ink-muted">100</td>
    <td class="px-4 py-2.5 text-ink-muted">$0</td>
  </tr>
  <tr class="border-t border-line">
    <td class="px-4 py-2.5 text-ink">Starter</td>
    <td class="px-4 py-2.5 text-ink-muted">10,000</td>
    <td class="px-4 py-2.5 text-ink-muted">$40</td>
  </tr>
<% end %>

The table's chrome, and only its chrome. What goes in a row is the caller's, because the tables the catalog names it for — a parameter reference, a plan comparison and the playground's editable grid — share a frame and share very little else.

One frame for all three is the point. The reference and the grid used to be separately drawn tables that agreed on tokens and on nothing else: square edges against a rounded card, a lettered head band on one and a bare head on the other, 16px cells against 8px. What they are allowed to differ on is what their contents actually need, which is what layout: and capped: are — see ParamTableComponentPreview for the grid drawn in this same frame.

No params configured.