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>
      <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 %>
          <% end %>
        </td>
      </tr>
    </tbody>
  </table>
</div>