Renders an empty state card with a message and optional action slot.

Attributes

• message — the text to display (required)

Slots

• inner_block — optional action content (buttons, links)

Attributes

• message (:string) (required)

Slots

• inner_block

Renders a configurable item table with optional card view toggle.

Columns are opt-in — only the columns you list are shown. Actions (edit, delete, restore) are opt-in via their respective attributes.

Attributes

• items — list of items to display (required)
• columns — list of column atoms to show (default: [:name, :sku, :base_price, :status]) Available: [:name, :sku, :base_price, :price, :unit, :status, :category, :catalogue, :manufacturer]
• cards — enable card view toggle (default: false). When enabled, renders a table/card toggle button and shows items as cards on mobile. The card view shows the item name as the title, selected columns as key-value fields, and action buttons in the card footer.
• id — unique ID for the component (required when cards is true, used by the JS hook to persist view preference)
• markup_percentage — catalogue markup for :price column (required if :price in columns)
• edit_path — 1-arity function (uuid -> path) to enable edit links
• on_delete — event name for soft-delete button (e.g. "delete_item")
• on_restore — event name for restore button (e.g. "restore_item")
• on_permanent_delete — event name for permanent delete (e.g. "show_delete_confirm")
• permanent_delete_type — type string passed as phx-value-type (e.g. "item")
• catalogue_path — 1-arity function (uuid -> path) for catalogue links in :catalogue column
• variant — table variant: "default" or "zebra" (default: "default")
• size — table size: "xs", "sm", "md", "lg" (default: "sm")
• wrapper_class — override wrapper CSS class

Examples

<%!-- Table only --%>
<.item_table items={@items} columns={[:name, :sku, :base_price]} />

<%!-- With card view toggle --%>
<.item_table
  items={@items}
  columns={[:name, :sku, :base_price, :price, :status]}
  cards={true}
  id="catalogue-items"
  markup_percentage={@catalogue.markup_percentage}
  edit_path={&Paths.item_edit/1}
  on_delete="delete_item"
/>

Attributes

• items (:list) (required)
• columns (:list) - Defaults to [:name, :sku, :base_price, :status].
• cards (:boolean) - Defaults to false.
• show_toggle (:boolean) - Defaults to true.
• id (:string) - Defaults to nil.
• storage_key (:string) - Defaults to nil.
• markup_percentage (:any) - Defaults to nil.
• edit_path (:any) - Defaults to nil.
• on_delete (:string) - Defaults to nil.
• on_restore (:string) - Defaults to nil.
• on_permanent_delete (:string) - Defaults to nil.
• permanent_delete_type (:string) - Defaults to "item".
• catalogue_path (:any) - Defaults to nil.
• variant (:string) - Defaults to "default".
• size (:string) - Defaults to "sm".
• wrapper_class (:string) - Defaults to nil.

Renders a search input with debounce and clear button.

Emits search event with %{"query" => value} on change/submit, and clear_search on clear button click. Override event names via attrs.

Attributes

• query — current search query string (required)
• placeholder — input placeholder text (default: "Search...")
• on_search — event name for search (default: "search")
• on_clear — event name for clear (default: "clear_search")
• debounce — debounce ms (default: 300)
• class — additional CSS classes on the wrapper div

Attributes

• query (:string) (required)
• placeholder (:string) - Defaults to "Search...".
• on_search (:string) - Defaults to "search".
• on_clear (:string) - Defaults to "clear_search".
• debounce (:integer) - Defaults to 300.
• class (:string) - Defaults to "".

Renders a search results count summary line.

Attributes

• count — total number of matching results (required)
• query — the search query string (required)
• loaded — optional count of results currently rendered. When given and less than count, the summary shows "X of Y" so users know the list is paging. Omit or pass nil for a plain "N results" line.

Attributes

• count (:integer) (required)
• query (:string) (required)
• loaded (:integer) - Defaults to nil.

Renders a table/card view toggle that syncs all tables sharing the same storage key.

Place this once at the top of a page, and set show_toggle={false} + matching storage_key on the individual item_table components.

Uses the same localStorage mechanism as table_default's built-in toggle, so all tables reading the same key will respect the user's choice.

Attributes

• storage_key — the localStorage key to sync (required, must match the tables)
• class — additional CSS classes

Examples

<.view_mode_toggle storage_key="catalogue-items" />
<.item_table cards={true} show_toggle={false} storage_key="catalogue-items" ... />

Attributes

• storage_key (:string) (required)
• class (:string) - Defaults to "".