FrappeUIPhx.Components.List (frappe_ui_phx v0.3.1)

Copy Markdown View Source

Tabela de objetos: colunas por slot (:col), ações por linha (:action), seleção por checkbox e reordenação por arrastar-e-soltar. O estado (selected, ordem de rows) vive no servidor; cada interação é um evento.

<.list id="pedidos" rows={@pedidos} selectable selected={@selected} on_select="select" on_drop="reorder">
  <:col :let={pedido} label="Número">{pedido.numero}</:col>
  <:action :let={pedido}><.button label="Abrir" navigate={~p"/pedidos/#{pedido.id}"} /></:action>
</.list>

Em apps que já têm list/1 no core_components, use use FrappeUIPhx, except: [list: 1].

Summary

Functions

list(assigns)

Functions

list(assigns)

Attributes

  • id (:string) (required)
  • rows (:list) (required)
  • row_id (:any) - Defaults to &FrappeUIPhx.Components.Sortable.default_id/1.
  • selectable (:boolean) - mostra a coluna de seleção (um checkbox por linha). Defaults to false.
  • selected (:list) - ids selecionados, comparados como texto. Defaults to [].
  • on_select (:string) - evento do servidor: %{"id" => id}. Defaults to nil.
  • on_drop (:string) - liga o arrastar-e-soltar; evento: %{"id", "to", "position"}. Defaults to nil.
  • empty_text (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • col (required) - Accepts attributes:
    • label (:string) (required)
    • class (:string)
  • action