Packages

mbta_metro

0.0.17
1.1.2 1.1.1 1.1.0 1.0.1 1.0.0 0.3.3 0.3.2 0.3.1 0.3.0 0.2.4 0.2.3 0.2.2 0.2.1 0.2.0 0.1.21 0.1.20 0.1.19 0.1.18 0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0 0.0.65 0.0.64 0.0.62 0.0.61 0.0.60 0.0.58 0.0.57 0.0.56 0.0.55 0.0.54 0.0.53 0.0.52 0.0.51 0.0.50 0.0.49 0.0.48 0.0.47 0.0.46 0.0.45 0.0.44 0.0.43 0.0.42 0.0.41 0.0.40 0.0.39 0.0.34 0.0.30 0.0.27 0.0.20 0.0.19 0.0.18 0.0.17 0.0.16 0.0.15 0.0.14 0.0.13 0.0.12 0.0.11 0.0.10 0.0.9 0.0.8 0.0.7 0.0.6 0.0.5 0.0.4 0.0.3 0.0.2 0.0.1 0.0.1-alpha

A Phoenix LiveView component library

HexDocs

Current section

Files

Jump to
Readme
85 Versions
6 Dependencies
Dependants
Files
Activity
mbta_metro lib mbta_metro components table.ex
Raw

lib/mbta_metro/components/table.ex 

defmodule MbtaMetro.Components.Table do

  @moduledoc false



  use Phoenix.Component



  alias Phoenix.LiveView.LiveStream



  attr :id, :string, required: true

  attr :rows, :list, required: true

  attr :row_id, :any, default: nil, doc: "the function for generating the row id"

  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"



  attr :row_item, :any,

    default: &Function.identity/1,

    doc: "the function for mapping each row before calling the :col and :action slots"



  slot :col, required: true do

    attr :label, :string

  end



  slot :action, doc: "the slot for showing user actions in the last table column"



  @doc """

  Renders a table with generic styling.



  ## Examples



      <.table id="users" rows={@users}>

        <:col :let={user} label="id"><%= user.id %></:col>

        <:col :let={user} label="username"><%= user.username %></:col>

      </.table>

  """

  def table(assigns) do

    assigns =

      with %{rows: %LiveStream{}} <- assigns do

        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)

      end



    ~H"""

    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">

      <table class="w-[40rem] mt-11 sm:w-full">

        <thead class="text-sm text-left leading-6 text-silver-600">

          <tr>

            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>

            <th :if={@action != []} class="relative p-0 pb-4">

              <span class="sr-only">"Actions"></span>

            </th>

          </tr>

        </thead>

        <tbody

          id={@id}

          phx-update={match?(%LiveStream{}, @rows) && "stream"}

          class="relative divide-y divide-silver-100 border-t border-silver-200 text-sm leading-6 text-silver-800"

        >

          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-silver-100">

            <td

              :for={{col, i} <- Enum.with_index(@col)}

              phx-click={@row_click && @row_click.(row)}

              class={["relative p-0", @row_click && "hover:cursor-pointer"]}

            >

              <div class="block py-4 pr-6">

                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-silver-100" />

                <span class={["relative", i == 0 && "font-semibold text-silver-900"]}>

                  <%= render_slot(col, @row_item.(row)) %>

                </span>

              </div>

            </td>

            <td :if={@action != []} class="relative w-14 p-0">

              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">

                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-silver-100" />

                <span

                  :for={action <- @action}

                  class="relative ml-4 font-semibold leading-6 text-silver-900 hover:text-silver-700"

                >

                  <%= render_slot(action, @row_item.(row)) %>

                </span>

              </div>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

    """

  end

end