PhoenixKitWeb.Components.Core.TableDefault (phoenix_kit v1.7.111)

A basic table component with daisyUI styling.

Supports an optional card/table view toggle for responsive layouts. When items is provided or toggleable is true, renders both a table view (desktop default) and a card view (mobile default) with an optional toggle button.

Examples

Basic table (unchanged API)

<.table_default>
  <.table_default_header>
    <.table_default_row>
      <.table_default_header_cell>Name</.table_default_header_cell>
      <.table_default_header_cell>Email</.table_default_header_cell>
    </.table_default_row>
  </.table_default_header>
  <.table_default_body>
    <.table_default_row>
      <.table_default_cell>John Doe</.table_default_cell>
      <.table_default_cell>john@example.com</.table_default_cell>
    </.table_default_row>
  </.table_default_body>
</.table_default>

With card/table toggle

<.table_default
  id="users-table"
  toggleable
  items={@users}
  card_title={fn user -> user.name end}
  card_fields={fn user -> [
    %{label: "Email", value: user.email},
    %{label: "Role", value: user.role}
  ] end}
>
  <.table_default_header>...</.table_default_header>
  <.table_default_body>...</.table_default_body>
  <:card_actions :let={user}>
    <.button size="sm" navigate={~p"/users/#{user.id}"}>View</.button>
  </:card_actions>
  <:toolbar_title>
    <span class="text-sm text-base-content/60">{length(@users)} users</span>
  </:toolbar_title>
  <:toolbar_actions>
    <.button size="sm" navigate={~p"/users/new"}>Add User</.button>
  </:toolbar_actions>
</.table_default>

Summary

Functions

search_toolbar(assigns)

Renders a search input with a magnifying glass icon and debounce.

sort_header_cell(assigns)

Renders a sortable table header cell.

table_default(assigns)

Renders a table with daisyUI styling.

table_default_body(assigns)

Renders a table body section.

table_default_cell(assigns)

Renders a table data cell.

table_default_footer(assigns)

Renders a table footer section.

table_default_header(assigns)

Renders a table header section.

table_default_header_cell(assigns)

Renders a table header cell.

table_default_row(assigns)

Renders a table row.

Functions

search_toolbar(assigns)

Renders a search input with a magnifying glass icon and debounce.

By default emits phx-change="search" with a 300ms debounce. When on_submit is provided the input is wrapped in a <form> element.

Attributes

value (:string) (required)
on_change (:string) - Defaults to "search".
on_submit (:string) - Defaults to nil.
placeholder (:string) - Defaults to nil.
debounce (:integer) - Defaults to 300.
name (:string) - Defaults to "search".
target (:any) - Defaults to nil.
class (:string) - Defaults to "".

sort_header_cell(assigns)

Renders a sortable table header cell.

When sort is nil, renders an inert <th> label. When sort is provided, renders a clickable button emitting toggle_sort (or a custom event) with phx-value-by set to the field key. The active column shows a chevron icon reflecting the current sort direction.

Attributes

field (:atom) (required)
sort (:map) - Current sort: %{by: atom, dir: :asc | :desc}. When nil, renders inert label. Defaults to nil.
event (:string) - Defaults to "toggle_sort".
target (:any) - Defaults to nil.
align (:atom) - Defaults to :left. Must be one of :left, :right, or :center.
class (:string) - Defaults to "".
Global attributes are accepted. Supports all globals plus: ["colspan", "rowspan"].

Slots

inner_block (required)

table_default(assigns)

Renders a table with daisyUI styling.

When items is provided or toggleable is true, renders a responsive wrapper with both table and card views, plus an optional desktop toggle button. Otherwise renders the classic table-only layout (fully backward compatible).

Attributes

id - Element ID, required when using card/table toggle (optional)
class - Additional CSS classes (optional)
variant - Table variant: "default", "zebra", "pin-rows", "pin-cols" (optional, default: "default")
size - Table size: "xs", "sm", "md", "lg" (optional, default: "md")
toggleable - Show card/table toggle buttons on desktop (optional, default: false)
items - List of items for card view rendering (optional, default: [])
card_title - Function that returns the card title for an item (optional)
card_fields - Function that returns a list of %{label: string, value: any} for an item (optional)
storage_key - localStorage key for persisting view preference, falls back to id in JS (optional)
rest - Additional HTML attributes (optional)

Slots

inner_block - Table content (thead, tbody, etc.)
card_actions - Action buttons rendered in each card footer (receives item via :let)
toolbar_title - Title/content rendered at the start of the toolbar row
toolbar_actions - Buttons rendered in the toolbar before the view toggle

Attributes

id (:string) - Defaults to nil.
class (:string) - Defaults to "".
variant (:string) - Defaults to "default". Must be one of "default", "zebra", "pin-rows", or "pin-cols".
size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", or "lg".
toggleable (:boolean) - Defaults to false.
show_toggle (:boolean) - Defaults to true.
items (:list) - Defaults to [].
card_title (:any) - Defaults to nil.
card_fields (:any) - Defaults to nil.
storage_key (:string) - Defaults to nil.
wrapper_class (:string) - Defaults to "rounded-lg shadow-md overflow-x-auto overflow-y-clip".
on_reorder (:string) - When set, the card-view container becomes a SortableGrid hook target. The table-view's tbody is owned by the inner_block — wire that side separately so desktop users get the same DnD as mobile. Defaults to nil.
reorder_scope (:map) - Map of scope values exposed on the card-view container as data-sortable-scope-* attrs. Keys are lowercased and dasherized for the DOM attr; the JS hook sends them back to LV as camelCase, so an Elixir key :category_uuid arrives in the LV handler payload as "categoryUuid". Defaults to %{}.
reorder_group (:string) - SortableJS group name for cross-container drag (must match the table-view side). Defaults to nil.
item_id (:any) - 1-arity function returning the data-id for a card. Defaults to & &1.uuid. Required when on_reorder is set. Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)
card_header - Custom header for each card (receives item via :let); replaces card_title.
card_actions - Action buttons in card footer.
toolbar_title - Title or arbitrary content rendered at the start of the toolbar row.
toolbar_actions - Action buttons rendered in the toolbar, before the view toggle.

table_default_body(assigns)

Renders a table body section.

Slots

inner_block (required)

table_default_cell(assigns)

Renders a table data cell.

Attributes

class - Additional CSS classes (optional)
colspan - Number of columns to span (optional)
rowspan - Number of rows to span (optional)
rest - Additional HTML attributes (optional)

Attributes

class (:string) - Defaults to "".
colspan (:integer) - Defaults to nil.
rowspan (:integer) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

table_default_footer(assigns)

Renders a table footer section.

Slots

inner_block (required)

table_default_header(assigns)

Renders a table header section.

Slots

inner_block (required)

table_default_header_cell(assigns)

Renders a table header cell.

Attributes

class - Additional CSS classes (optional)
rest - Additional HTML attributes (optional)

Attributes

class (:string) - Defaults to "".
Global attributes are accepted.

Slots

inner_block (required)

table_default_row(assigns)

Renders a table row.

Attributes

class - Additional CSS classes (optional)
hover - Enable hover effect: true/false (optional, default: true)
rest - Additional HTML attributes (optional)

Attributes

class (:string) - Defaults to "".
hover (:boolean) - Defaults to true.
Global attributes are accepted.

Slots

inner_block (required)