ListingActions

Renders the action buttons for a single entity row. The buttons shown are driven by the enabledActions array from ListingContext. The component also handles modals for delete confirmation, quick-edit, quick-show, quick-duplicate, and default-value flagging.

On desktop the buttons are shown inline; on mobile they collapse into a DropdownMenu. When a row is selected for bulk editing or inline editing, the buttons are replaced with a Cancel / Update pair.

Import


import ListingActions from "@phpcreation/frontend-crud-react-nextjs-bundle/components/Listing/Actions";

Props

Prop	Type	Required	Description
`fqcn_bui`	`IFQCN_BUI`	Yes	Used to generate stable element IDs.
`resource`	`string`	Yes	API resource name, e.g. `"invoices"`.
`id`	`number`	Yes	Entity ID for this row.
`formInputsEdit`	`FilterField[]`	No	Fields for quick-edit modal.
`formInputsAdd`	`FilterField[]`	No	Fields for quick-duplicate modal.
`formInputsShow`	`FilterField[]`	No	Fields for quick-show modal.
`isKanban`	`boolean`	No	Switches to compact Kanban button style.
`locale`	`string`	No	Active locale, defaults to `"en"`.
`user`	`User \| null`	Yes	Used for role-based action visibility via `getRoleAccessbility`.
`tenant`	`string`	Yes	Tenant identifier.
`customActions`	`{ key: string; action: ReactNode }[]`	No	Override or extend specific action slots.
`qField`	`string`	No	Query field name used in translatable entity flows.
`defaultFlagkvs`	`any`	No	KVS hook result for the default-value flag feature.
`translatable`	`boolean`	No	Enables translation handling in quick-edit/duplicate.

Supported Action Keys

The enabledActions string array (set in ListingContext) accepts these keys:

Key	Description
`"show"`	Navigate to the entity detail page.
`"quick-show"`	Open a read-only modal preview.
`"edit"`	Navigate to the full edit page.
`"quick-edit"`	Open an in-context edit modal.
`"inline-edit"`	Enable inline field editing in the table row.
`"duplicate"`	Navigate to the create page pre-filled with this row’s data.
`"quick-duplicate"`	Open a quick-duplicate modal.
`"delete"`	Open delete confirmation modal.
`"disable"`	Toggle the entity’s `disabled`/`disabledAt` field.
`"priority-up"`	Swap `priority` with the previous row. Flat listing only, hidden on the treeview route.
`"priority-down"`	Swap `priority` with the next row. Flat listing only.
`"tree-up"`	Swap `lft`/`rgt` with the previous same-parent sibling. Treeview route only.
`"tree-down"`	Swap `lft`/`rgt` with the next same-parent sibling. Treeview route only.
`"default-value"`	Mark entity as the default value via KVS.
`"anchor"`	Copy a direct link to this row to the clipboard.
`"email-template"`	Delegates to `ActionButtons` for email template actions.
`"print-template"`	Delegates to `ActionButtons` for print template actions.

Role-based access is checked per action via getRoleAccessbility(user?.roles, resource, action). Actions the user lacks permission for are hidden entirely, not just disabled.

The priority and tree move buttons use the same chevron icons but reorder different things; see Tree View for the comparison.

Usage

Standard Row


// enabledActions is set on ListingContext; ListingTable passes these props automatically.
<ListingActions
  fqcn_bui={{ Bundle: "BillBundle", Unit: "Invoice", Interface: "listing" }}
  resource="invoices"
  id={item.id}
  formInputsEdit={editFields}
  formInputsAdd={addFields}
  formInputsShow={showFields}
  user={currentUser}
  tenant="acme"
  locale="en"
/>