Page builder is the default mechanism for building custom dashboard pages.

Each dashboard page is a LiveView with additional callbacks for customizing the menu appearance. One notable difference, however, is that a page implements a render_page/1 callback, which must return one or more page builder components, instead of a render/1 callback that returns ~L.

A simple and straight-forward example of a custom page is the Phoenix.LiveDashboard.ETSPage that ships with the dashboard:

defmodule Phoenix.LiveDashboard.EtsPage do
  @moduledoc false
  use Phoenix.LiveDashboard.PageBuilder

  @impl true
  def menu_link(_, _) do
    {:ok, "ETS"}
  end

  @impl true
  def render_page(_assigns) do
    table(
      columns: columns(),
      id: :ets_table,
      row_attrs: &row_attrs/1,
      row_fetcher: &fetch_ets/2,
      rows_name: "tables",
      title: "ETS"
    )
  end

  defp fetch_ets(params, node) do
    %{search: search, sort_by: sort_by, sort_dir: sort_dir, limit: limit} = params

    # Here goes the code that goes through all ETS tables, searches
    # (if not nil), sorts, and limits them.
    #
    # It must return a tuple where the first element is list with
    # the current entries (up to limit) and an integer with the
    # total amount of entries.
    # ...
  end

  defp columns() do
    [
      %{
        field: :name,
        header: "Name or module",
      },
      %{
        field: :protection
      },
      %{
        field: :type
      },
      %{
        field: :size,
        cell_attrs: [class: "text-right"],
        sortable: :desc
      },
      %{
        field: :memory,
        format: &format_words/1,
        sortable: :desc
      },
      %{
        field: :owner,
        format: &encode_pid/1
      }
    ]
  end

  defp row_attrs(table) do
    [
      {"phx-click", "show_info"},
      {"phx-value-info", encode_ets(table[:id])},
      {"phx-page-loading", true}
    ]
  end
end

Once a page is defined, it must be declared in your live_dashboard route as follows:

live_dashboard "/dashboard",
  additional_pages: [
    route_name: MyAppWeb.MyCustomPage
  ]

Or alternatively:

live_dashboard "/dashboard",
  additional_pages: [
    route_name: {MyAppWeb.MyCustomPage, some_option: ...}
  ]

The second argument of the tuple will be given to the init/1 callback. If not tuple is given, init/1 will receive an empty list.

Components

A page can only have the components listed with this page. At the moment, only nav_bar/1 and table/1 are supported.