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
<div class="overflow-x-auto rounded-lg border border-line"> <table class="w-full text-left text-sm border-collapse"> <caption class="sr-only">Catalog</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">Engine</th> <th scope="col" class="px-4 py-2.5 text-right">Parameters</th> <th scope="col" class="px-4 py-2.5 text-right">Recorded pages</th> </tr> </thead> <tbody class="divide-y divide-line"> <tr class="border-t border-line"> <td class="px-4 py-2.5 text-ink">Google Search</td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">20</td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">2</td> </tr> <tr class="border-t border-line"> <td class="px-4 py-2.5 text-ink">Google Shopping</td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">14</td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">2</td> </tr> <tr class="border-t border-line"> <td class="px-4 py-2.5 text-ink">Google Product Page</td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">6</td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">2</td> </tr> </tbody> </table></div>1
2
3
4
5
6
7
8
9
10
11
12
<%= render TableComponent.new(headers: [ "Engine", "Parameters", "Recorded pages" ], numeric: [ "Parameters", "Recorded pages" ], caption: "Catalog") do %> <% PreviewFixtures::ENGINES.each do |engine| %> <% api = Searchapi::Apis::BY_ENGINE.fetch(engine) %> <tr class="border-t border-line"> <td class="px-4 py-2.5 text-ink"><%= api.label %></td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted"><%= api.params.size %></td> <td class="px-4 py-2.5 text-right font-mono text-ink-muted">2</td> </tr> <% end %><% end %>Columns are declared rather than inferred from the first row, so numeric:
is a property of the column: mono and right-aligned wherever it appears.
No params configured.