2024-10-01 10:47:59 -04:00
|
|
|
<%# locals: (headers: [], rows: [], caption: nil) %>
|
|
|
|
<div class="overflow-x-auto">
|
2025-04-11 09:28:00 -05:00
|
|
|
<div class="border border-secondary rounded-md shadow-border-xs text-sm bg-container w-full">
|
2024-10-01 10:47:59 -04:00
|
|
|
<div class="grid border-b border-b-alpha-black-200" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
|
|
|
|
<% headers.each_with_index do |header, index| %>
|
|
|
|
<div class="
|
2025-04-11 09:28:00 -05:00
|
|
|
bg-container-inset px-3 py-2.5 font-medium whitespace-nowrap overflow-x-auto
|
2024-10-01 10:47:59 -04:00
|
|
|
first:rounded-tl-md last:rounded-tr-md
|
|
|
|
<%= "border-r border-r-alpha-black-200" unless index == headers.length - 1 %>
|
|
|
|
">
|
|
|
|
<%= header %>
|
|
|
|
</div>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<% rows.each_with_index do |row, row_index| %>
|
|
|
|
<div class="grid <%= "border-b border-b-alpha-black-200" if row_index < rows.length - 1 || caption %>" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
|
|
|
|
<% row.each_with_index do |(header, value), col_index| %>
|
|
|
|
<div class="
|
|
|
|
px-3 py-2.5 whitespace-nowrap overflow-x-auto flex items-start
|
|
|
|
<%= "border-r border-r-alpha-black-200" unless col_index == row.length - 1 %>
|
|
|
|
<%= "rounded-bl-md" if !caption && row_index == rows.length - 1 && col_index == 0 %>
|
|
|
|
<%= "rounded-br-md" if !caption && row_index == rows.length - 1 && col_index == row.length - 1 %>
|
|
|
|
">
|
|
|
|
<%= value %>
|
|
|
|
</div>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% if caption %>
|
2025-04-11 09:28:00 -05:00
|
|
|
<div class="px-3 py-2.5 text-center text-xs text-primary rounded-b-md italic bg-container-inset overflow-x-auto">
|
2024-10-01 10:47:59 -04:00
|
|
|
<%= caption %>
|
|
|
|
</div>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
</div>
|