Phoenix LiveView 0.17 table

index.ex

defmodule ExperimentsWeb.ComposerLive.Index do
  use ExperimentsWeb, :live_view

  import ExperimentsWeb.ComposerLive.Table

  alias Experiments.Composers
  alias Experiments.Composers.Composer

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, :composer_collection, list_composer())}
  end

  @impl true
  def handle_params(params, _url, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
  end

  defp apply_action(socket, :edit, %{"id" => id}) do
    socket
    |> assign(:page_title, "Edit Composer")
    |> assign(:composer, Composers.get_composer!(id))
  end

  defp apply_action(socket, :new, _params) do
    socket
    |> assign(:page_title, "New Composer")
    |> assign(:composer, %Composer{})
  end

  defp apply_action(socket, :index, _params) do
    socket
    |> assign(:page_title, "Listing Composer")
    |> assign(:composer, nil)
  end

  @impl true
  def handle_event("delete", %{"id" => id}, socket) do
    composer = Composers.get_composer!(id)
    {:ok, _} = Composers.delete_composer(composer)

    {:noreply, assign(socket, :composer_collection, list_composer())}
  end

  defp list_composer do
    Composers.list_composer()
  end
end

index.html.heex

<h1>Listing Composer</h1>

<%= if @live_action in [:new, :edit] do %>
  <%= live_modal ExperimentsWeb.ComposerLive.FormComponent,
    id: @composer.id || :new,
    title: @page_title,
    action: @live_action,
    composer: @composer,
    return_to: Routes.composer_index_path(@socket, :index) %>
<% end %>

<.table rows={@composer_collection}>
  <:col let={composer} label="Last name">
    <%= composer.last_name %>
  </:col>

  <:col let={composer} label="First name">
    <%= composer.first_name %>
  </:col>

  <:col let={composer} label="Birth year">
    <%= composer.birth_year %>
  </:col>

  <:col let={composer} label="Death year">
    <%= composer.death_year %>
  </:col>

  <:col let={composer}>
    <span><%= live_redirect "Show", to: Routes.composer_show_path(@socket, :show, composer) %></span>
    <span><%= live_patch "Edit", to: Routes.composer_index_path(@socket, :edit, composer) %></span>
    <span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: composer.id, data: [confirm: "Are you sure?"] %></span>
  </:col>
</.table>

<span><%= live_patch "New Composer", to: Routes.composer_index_path(@socket, :new) %></span>

table.ex

defmodule ExperimentsWeb.ComposerLive.Table do
  use Phoenix.Component

  def table(assigns) do
    ~H"""
    <table class="w-full">
      <thead>
        <tr class="text-md font-semibold text-left text-left text-gray-900 bg-gray-100 uppercase">
          <%= for col <- @col do %>
            <th class="px-4 py-3">
              <%= if col[:label] == nil, do: "", else: col.label %>
            </th>
          <% end %>
        </tr>
      </thead>

      <tbody class="bg-white">
        <%= if @rows == [] do %>
          <td class="pl-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">No results.</td>
        <% else %>
          <%= for row <- @rows do %>
            <tr class="text-gray-700">
              <%= for col <- @col do %>
                <td class="px-4 py-3 border">
                  <%= render_slot(col, row) %>
                </td>
              <% end %>
            </tr>
          <% end %>
        <% end %>
      </tbody>
    </table>
    """
  end

  def striped(assigns) do
    ~H"""
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <%= for col <- @col do %>
            <%= if col[:visible] != false do %>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                <%= if col[:label] != nil, do: col.label, else: "" %>
              </th>
            <% end %>
          <% end %>
        </tr>
      </thead>

      <tbody>
        <%= if @rows == [] do %>
          <tr class="bg-white">
            <td class="pl-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">No results.</td>
            <%= for col <- Enum.drop(@col, 0) do %>
              <%= if col[:visible] != false do %>
                <td></td>
              <% end %>
            <% end %>
          </tr>
        <% else %>
          <%= for {row, i} <- Enum.with_index(@rows) do %>
            <tr id={if assigns[:row_id_prefix] != nil, do: "#{@row_id_prefix}-#{row.id}"} class={if rem(i, 2) == 0, do: "bg-white", else: "bg-gray-50"}>
              <%= for col <- @col do %>
                <%= if col[:visible] != false do %>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <%= render_slot(col, row) %>
                  </td>
                <% end %>
              <% end %>
            </tr>
          <% end %>
        <% end %>
      </tbody>
    </table>
    """
  end
end