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

<div id={@id} class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-white">
  <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 %>
            <th class={["p-2", column[:class]]}>
              <span
                class="cursor-pointer flex justify-center items-center space-x-2"
                phx-click="sort_by"
                phx-value-sort-key={key}
                phx-target={@myself}
              >
                <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>
                <%= if @last_sort_key == key do %>
                  <%= case @sort_mode do %>
                    <% :asc -> %>
                      <i class="w-0 float-right fas fa-sm fa-chevron-down"></i>
                    <% :desc -> %>
                      <i class="w-0 float-right fas fa-sm fa-chevron-up"></i>
                  <% end %>
                <% else %>
                  <i class="w-0 float-right fas fa-sm fa-chevron-up opacity-0"></i>
                <% end %>
              </span>
            </th>
          <% else %>
            <th class={["p-2 cursor-not-allowed", column[:class]]}>
              <%= label %>
            </th>
          <% end %>
        <% end %>
      </tr>
    </thead>
    <tbody>
      <%= for {values, i} <- @rows |> Enum.with_index() do %>
        <tr class={if i |> Integer.is_even(), do: @row_class, else: @alternate_row_class}>
          <%= for %{key: key} = value <- @columns do %>
            <td class={["p-2", value[:class]]}>
              <%= case values |> Map.get(key) do %>
                <% {_custom_sort_value, value} -> %>
                  <%= value %>
                <% value -> %>
                  <%= value %>
              <% end %>
            </td>
          <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>