PhoenixKitWeb.Components.Core.TableRowMenu (phoenix_kit v1.7.102)

Copy Markdown View Source

Dropdown action menu for table rows.

Provides a compact "⋮" trigger button that opens a floating menu with action items. Uses position: fixed via the RowMenu JS hook to escape overflow-clip table containers — a common DaisyUI issue when dropdowns are nested inside tables.

The menu is automatically positioned to stay within the viewport: it opens below the trigger by default, flips above if there's no space below, and aligns to the right edge of the trigger (shifting left if that would clip off-screen).

Works on mobile and desktop. On mobile the menu is full-width clamped to viewport.

Components

Example

<.table_row_menu id={"menu-#{user.uuid}"}>
  <.table_row_menu_link
    navigate={Routes.path("/admin/users/view/#{user.uuid}")}
    icon="hero-eye"
    label={gettext("View")}
  />
  <.table_row_menu_link
    navigate={Routes.path("/admin/users/edit/#{user.uuid}")}
    icon="hero-pencil"
    label={gettext("Edit")}
    variant="secondary"
  />
  <.table_row_menu_divider />
  <.table_row_menu_button
    phx-click="delete"
    phx-value-id={user.uuid}
    icon="hero-trash"
    label={gettext("Delete")}
    variant="error"
  />
</.table_row_menu>

Summary

Functions

table_row_menu(assigns)

Renders the dropdown trigger and menu container.

table_row_menu_button(assigns)

Renders an action button item inside the menu.

table_row_menu_divider(assigns)

Renders a visual separator between menu item groups.

table_row_menu_link(assigns)

Renders a navigation link item inside the menu.

Functions

table_row_menu(assigns)

Renders the dropdown trigger and menu container.

Attributes

  • id - Unique element ID (required). Used by the JS hook.
  • label - Accessible label for the trigger button (optional, default: "Actions")
  • mode - Display mode (optional, default: "dropdown"):
    • "dropdown" — always show the ⋮ dropdown menu (original behavior)
    • "inline" — always show actions as inline buttons (no dropdown)
    • "auto" — inline buttons on md+ screens, dropdown on mobile
  • class - Additional CSS classes for the wrapper (optional)

Slots

  • inner_block - Menu items (use table_row_menu_link, table_row_menu_button, table_row_menu_divider)

Attributes

  • id (:string) (required)
  • label (:string) - Defaults to "Actions".
  • mode (:string) - Defaults to "dropdown". Must be one of "dropdown", "inline", or "auto".
  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)

table_row_menu_button(assigns)

Renders an action button item inside the menu.

Attributes

  • icon - Heroicon name, e.g. "hero-trash" (optional)
  • label - Item label text (required)
  • variant - Color variant: "default", "primary", "secondary", "info", "success", "warning", "error" (optional, default: "default")
  • rest - Additional HTML attributes (phx-click, phx-value-*, data-confirm, etc.)

Attributes

  • icon (:string) - Defaults to nil.
  • label (:string) (required)
  • variant (:string) - Defaults to "default".
  • Global attributes are accepted.

table_row_menu_divider(assigns)

Renders a visual separator between menu item groups.

table_row_menu_link(assigns)

Renders a navigation link item inside the menu.

Attributes

  • navigate - LiveView navigate path (optional)
  • href - Regular href (optional)
  • icon - Heroicon name, e.g. "hero-eye" (optional)
  • label - Item label text (required)
  • variant - Color variant: "default", "primary", "secondary", "info", "success", "warning", "error" (optional, default: "default")
  • rest - Additional HTML attributes passed to the <a> element

Attributes

  • navigate (:string) - Defaults to nil.
  • href (:string) - Defaults to nil.
  • icon (:string) - Defaults to nil.
  • label (:string) (required)
  • variant (:string) - Defaults to "default".
  • Global attributes are accepted.