An item of a grid's menus of your own: in a column's header menu
(:header_action), or in the menu of a cell (:cell_action), which a
right click opens, or the context-menu key or Shift+F10 on the active
cell.
<.data_grid id="orders" source={Order} repo={Repo} cell_menu>
<:col field={:customer} />
<:col field={:total} type={:decimal} />
<:header_action label="Explain" on_action={&explain/1} />
<:cell_action label="Open the customer" event="open_customer" columns={["customer"]} />
<:cell_action label="Copy a link" js={JS.dispatch("app:copy-link")} />
<:header_action :let={action} label="Column stats" types={[:integer, :decimal]}>
<.stats column={action.column} />
</:header_action>
</.data_grid>An item does one or more of:
on_action- a function of the item's context, called in the LiveView's process (ason_selectis);event- a name: the LiveView gets{Masu.Action, name, context}in itshandle_info/2, to change its own assigns (open a modal, navigate);js- aPhoenix.LiveView.JScommand, run in the browser on the grid's element; the element gets amasu:actionevent first, whosedetailis the context as the browser has it;- content - a panel of your own, which the server renders with the
context (
:let) under the header or the cell, until the person closes it (Escape, or a click away).
The context is a map:
grid- the id of the grid;column- the key of the column;- for a cell:
id, the row's id,row, the row as the source reads it, andvalue, the cell's value; read on the server, not taken from the browser; - for a cell in a selected range:
range,%{ids: ids, columns: keys}, the rows (up to 10,000) and the columns of the range; the ids are the browser's, which an item checks as it checks any params.
In the browser, the context has the column's key, the row's id, and the value as the browser shows it.
columns (keys) and types limit the columns an item is for, and
show, a function of the Masu.Column, too; :if leaves an item out
altogether (:if={@admin?}). The server runs only the items that the
grid offers for the column.
Summary
Types
@type kind() :: :header | :cell
@type t() :: %Masu.Action{ columns: [String.t()] | nil, event: String.t() | nil, index: non_neg_integer(), js: String.t() | nil, kind: kind(), label: String.t(), on_action: (map() -> term()) | nil, show: (Masu.Column.t() -> boolean()) | nil, slot: map() | nil, types: [Masu.Column.type()] | nil }