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

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>
</.table_default>

Summary

Functions

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

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)

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.
items (:list) - Defaults to [].
card_title (:any) - Defaults to nil.
card_fields (:any) - Defaults to nil.
storage_key (:string) - 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.

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)