cannery/lib/cannery_web/components/table_component.html.heex

53 lines
2.0 KiB
Plaintext
Raw Normal View History

2022-11-17 22:16:46 -05:00
<div id={@id} class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-white">
2022-03-04 18:26:57 -05:00
<table class="min-w-full table-auto text-center bg-white">
<thead class="border-b border-primary-600">
<tr>
<%= for %{key: key, label: label} = column <- @columns do %>
<%= if column |> Map.get(:sortable, true) do %>
2023-01-25 23:13:16 -05:00
<th class={["p-2", column[:class]]}>
2022-03-04 22:27:09 -05:00
<span
class="cursor-pointer flex justify-center items-center space-x-2"
2022-03-04 18:26:57 -05:00
phx-click="sort_by"
phx-value-sort-key={key}
2022-03-04 22:27:09 -05:00
phx-target={@myself}
>
2022-11-17 22:16:46 -05:00
<i class="w-0 float-right fas fa-sm fa-chevron-up opacity-0"></i>
<span class={if @last_sort_key == key, do: "underline"}><%= label %></span>
2022-03-04 18:26:57 -05:00
<%= if @last_sort_key == key do %>
<%= case @sort_mode do %>
2022-03-04 22:27:09 -05:00
<% :asc -> %>
2022-11-17 22:16:46 -05:00
<i class="w-0 float-right fas fa-sm fa-chevron-down"></i>
2022-03-04 22:27:09 -05:00
<% :desc -> %>
2022-11-17 22:16:46 -05:00
<i class="w-0 float-right fas fa-sm fa-chevron-up"></i>
2022-03-04 18:26:57 -05:00
<% end %>
<% else %>
2022-11-17 22:16:46 -05:00
<i class="w-0 float-right fas fa-sm fa-chevron-up opacity-0"></i>
2022-03-04 18:26:57 -05:00
<% end %>
</span>
</th>
<% else %>
2023-01-25 23:13:16 -05:00
<th class={["p-2 cursor-not-allowed", column[:class]]}>
2022-03-04 18:26:57 -05:00
<%= label %>
</th>
<% end %>
<% end %>
</tr>
</thead>
<tbody>
2023-02-04 10:28:13 -05:00
<tr
:for={{values, i} <- @rows |> Enum.with_index()}
class={if i |> Integer.is_even(), do: @row_class, else: @alternate_row_class}
>
<td :for={%{key: key} = value <- @columns} class={["p-2", value[:class]]}>
<%= case values |> Map.get(key) do %>
<% {_custom_sort_value, value} -> %>
<%= value %>
<% value -> %>
<%= value %>
2022-03-04 18:26:57 -05:00
<% end %>
2023-02-04 10:28:13 -05:00
</td>
</tr>
2022-03-04 18:26:57 -05:00
</tbody>
</table>
</div>