3340077f60
We have a second line in several tables, but we couldn't use the table_card component because it didn't support this option. Since I plan to use it in more places, I decided to add it.
92 lines
3.5 KiB
Plaintext
92 lines
3.5 KiB
Plaintext
<%# locals: (title: nil, headers: [], rows:, empty_state: nil, right_items: nil, footer: nil) %>
|
|
|
|
<div>
|
|
<% if title || right_items %>
|
|
<div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
|
|
<%= title %>
|
|
</h3>
|
|
</div>
|
|
<% if right_items %>
|
|
<div class="mt-4 flex md:ml-4 md:mt-0">
|
|
<%== right_items.join %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<% unless headers.empty? || rows.empty? %>
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<% headers.each_with_index do |name, i| %>
|
|
<th
|
|
scope="col"
|
|
<% if i == 0 %>
|
|
class="pl-4 pr-3 sm:pl-6 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
<% elsif i + 1 == headers.length %>
|
|
class="pl-3 pr-4 sm:pr-6 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
<% else %>
|
|
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
<% end %>
|
|
>
|
|
<%= name %>
|
|
</th>
|
|
<% end %>
|
|
</tr>
|
|
</thead>
|
|
<% end %>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<% if rows.empty? %>
|
|
<tr>
|
|
<td colspan="<%= headers.length %>" class="text-center py-4 px-8 lg:px-32">
|
|
<% if empty_state.is_a?(Hash) %>
|
|
<%== part("components/empty_state", **empty_state) %>
|
|
<% else %>
|
|
<%== empty_state %>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% else %>
|
|
<% rows.each do |columns, row_opts| %>
|
|
<% row_opts ||= {} %>
|
|
<tr id="<%= row_opts[:id] %>">
|
|
<% columns.each_with_index do |(value, col_opts), i| %>
|
|
<% col_opts ||= {} %>
|
|
<td
|
|
<% if i == 0
|
|
cls="pl-4 pr-3 sm:pl-6 py-4 text-gray-900 font-medium whitespace-nowrap text-sm"
|
|
elsif i + 1 == columns.length
|
|
cls="pl-3 pr-4 sm:pr-6 py-4 text-gray-500 whitespace-nowrap text-sm"
|
|
else
|
|
cls="px-3 py-4 text-gray-500 whitespace-nowrap text-sm"
|
|
end
|
|
%>
|
|
class="<%= cls %> <%= col_opts[:extra_class] %>"
|
|
>
|
|
<% if value.is_a?(Array) %>
|
|
<% (first_value, first_opts), (second_value, second_opts) = value %>
|
|
<div class="font-medium text-gray-900">
|
|
<%== part("components/value_content", content: first_value, opts: first_opts) %>
|
|
</div>
|
|
<% if second_value %>
|
|
<div class="mt-1 text-gray-500 text-xs">
|
|
<%== part("components/value_content", content: second_value, opts: second_opts) %>
|
|
</div>
|
|
<% end %>
|
|
<% else %>
|
|
<%== part("components/value_content", content: value, opts: col_opts) %>
|
|
<% end %>
|
|
</td>
|
|
<% end %>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
<%== footer %>
|
|
</div>
|
|
</div>
|