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

<div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black">
  <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"
                phx-click="sort_by"
                phx-value-sort-key={key}
                phx-target={@myself}
              >
                <span class="underline"><%= label %></span>
                <%= if @last_sort_key == key do %>
                  <%= case @sort_mode do %>
                    <% :asc -> %>
                      <i class="fas fa-sm fa-chevron-down"></i>
                    <% :desc -> %>
                      <i class="fas fa-sm fa-chevron-up"></i>
                  <% end %>
                <% else %>
                  <i class="fas fa-sm fa-chevron-up opacity-0"></i>
                <% end %>
              </span>
            </th>
          <% else %>
            <th class={["p-2", column[:class]]}>
              <%= label %>
            </th>
          <% end %>
        <% end %>
      </tr>
    </thead>
    <tbody>
      <tr :for={values <- @rows}>
        <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>