# `PhoenixKitWeb.Components.Core.TableDefault`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.105/lib/phoenix_kit_web/components/core/table_default.ex#L1)

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>

# `table_default`

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`

Renders a table body section.

## Slots

* `inner_block` (required)

# `table_default_cell`

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`

Renders a table footer section.

## Slots

* `inner_block` (required)

# `table_default_header`

Renders a table header section.

## Slots

* `inner_block` (required)

# `table_default_header_cell`

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`

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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*