CnActionsBar

Toolbar that combines an item count display, a primary Add button, a view-mode toggle (Cards / Table), and an overflow actions menu containing Refresh, Import, Export, Copy-selected, and Delete-selected. All built-in mass actions are individually toggle-able.

Wraps: NcButton, NcActions

Try it

Loading CnActionsBar playground…

Usage

<CnActionsBar
  :pagination="pagination"
  :object-count="items.length"
  :selected-ids="selectedIds"
  add-label="Add Client"
  add-icon="AccountGroup"
  @add="createNew"
  @refresh="reload"
  @show-import="openImport"
  @show-export="openExport"
  @show-copy="openMassCopy"
  @show-delete="openMassDelete"
  @view-mode-change="viewMode = $event" />

Custom action items can be injected into the overflow menu:

<CnActionsBar ...>
  <template #action-items>
    <NcActionButton @click="openReport">
      <template #icon><ChartBar :size="20" /></template>
      Export report
    </NcActionButton>
  </template>
</CnActionsBar>

Props

Prop	Type	Default	Description
`pagination`	Object	`null`	Pagination state `{ total, page, pages, limit }` — used to render "Showing X of Y"
`objectCount`	Number	`0`	Number of currently visible items
`selectable`	Boolean	`true`	Whether rows/cards can be selected
`selectedIds`	Array	`[]`	Currently selected item IDs — controls disabled state of mass actions
`addLabel`	String	`'Add'`	Label for the primary Add button
`addIcon`	String	`''`	MDI icon name for the Add button (falls back to Plus)
`showAdd`	Boolean	`true`	Whether to show the Add button
`addDisabled`	Boolean	`false`	Whether the Add button is disabled
`viewMode`	String	`'table'`	Current view mode: `'table'` or `'cards'`
`showViewToggle`	Boolean	`true`	Whether to show the Cards/Table toggle (each option carries a leading icon)
`cardsLabel`	String	`''`	Label for the cards/grid view-toggle option (defaults to "Cards")
`tableLabel`	String	`''`	Label for the table/list view-toggle option (defaults to "Table")
`cardsIcon`	String	`''`	MDI icon name for the cards option (defaults to the built-in grid icon); resolved via CnIcon
`tableIcon`	String	`''`	MDI icon name for the table option (defaults to the built-in list icon); resolved via CnIcon
`showSearch`	Boolean	`false`	Show an inline search field on the left of the bar; emits `search` on input
`searchValue`	String	`''`	Current value of the inline search field (controlled)
`searchPlaceholder`	String	`''`	Placeholder / accessible label for the inline search field
`refreshing`	Boolean	`false`	Whether a refresh is currently in progress
`refreshDisabled`	Boolean	`false`	Whether the Refresh action is disabled
`showMassImport`	Boolean	`true`	Whether to show the Import action
`showMassExport`	Boolean	`true`	Whether to show the Export action
`showMassCopy`	Boolean	`true`	Whether to show the Copy selected action
`showMassDelete`	Boolean	`true`	Whether to show the Delete selected action
`inlineActionCount`	Number	`2`	How many actions to show inline (rest go in overflow)
`showRequestFeature`	Boolean	`false`	Show a built-in "Request a feature" entry in the overflow (after Refresh + headerActions). Emits `@request-feature`; the host opens the CnSuggestFeatureModal

Events

Event	Payload	Description
`add`	—	Add button clicked
`refresh`	—	Refresh action triggered
`request-feature`	—	Built-in "Request a feature" overflow item clicked (only when `showRequestFeature`)
`view-mode-change`	`'table'` \| `'cards'`	View toggle changed
`show-import`	—	Import action triggered
`show-export`	—	Export action triggered
`show-copy`	—	Copy selected action triggered
`show-delete`	—	Delete selected action triggered

Slots

Slot	Scope	Description
`filters`	—	Inline filter controls rendered inside the bar, between the view toggle and the add/actions (e.g. a `CnQuickFilterBar` segmented toggle).
`header-actions`	—	Extra buttons placed after the Add button, before the overflow menu
`action-items`	—	Extra `NcActionButton` items injected into the overflow menu
`mass-actions`	`{ count, selectedIds }`	Extra mass-action items at the bottom of the overflow menu

Documentation link

Set documentationUrl to add a Documentation entry to the overflow menu (just before Request a feature). It renders as a link that opens the URL in a new tab (target="_blank", rel="noopener noreferrer"); customise the wording with documentationLabel. Empty (the default) hides it. This mirrors the widget Actions menu's Documentation entry. CnIndexPage forwards its own documentationUrl / documentationLabel props here.

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnActionsBar.vue and update automatically whenever the component changes.

Props

Name	Type	Default	Description
`pagination`	`object`	`null`	Pagination state: { total, page, pages, limit }
`objectCount`	`number`	`0`	Number of currently visible objects (for "Showing X of Y")
`selectable`	`boolean`	`true`	Whether rows/cards can be selected
`selectedIds`	`array`	`[]`	Currently selected IDs
`addLabel`	`string`	`() => t('nextcloud-vue', 'Add')`	Label for the Add button
`addIcon`	`string`	`''`	MDI icon name for the Add button (e.g. 'AccountGroup'). Falls back to Plus icon.
`inlineActionCount`	`number`	`0`	How many action buttons to show inline (rest go in overflow dropdown)
`showMassImport`	`boolean`	`true`	Whether to show the built-in mass Import action
`showMassExport`	`boolean`	`true`	Whether to show the built-in mass Export action
`showMassCopy`	`boolean`	`true`	Whether to show the built-in mass Copy action
`showMassDelete`	`boolean`	`true`	Whether to show the built-in mass Delete action
`viewMode`	`string`	`'table'`	Current view mode: 'table' or 'cards'
`showViewToggle`	`boolean`	`true`	Whether to show the Cards/Table view toggle
`cardsLabel`	`string`	`''`	Label for the cards/grid view-toggle option (defaults to "Cards")
`tableLabel`	`string`	`''`	Label for the table/list view-toggle option (defaults to "Table")
`cardsIcon`	`string`	`''`	MDI icon name for the cards option (defaults to the built-in grid icon). Resolved via CnIcon.
`tableIcon`	`string`	`''`	MDI icon name for the table option (defaults to the built-in list icon). Resolved via CnIcon.
`showSearch`	`boolean`	`false`	Whether to show the inline search field on the left of the bar
`searchValue`	`string`	`''`	Current value of the inline search field (controlled)
`searchPlaceholder`	`string`	`''`	Placeholder / accessible label for the inline search field
`refreshing`	`boolean`	`false`	Whether the refresh action is currently in progress
`refreshDisabled`	`boolean`	`false`	Whether the refresh action is disabled (e.g. when required selections are missing)
`addDisabled`	`boolean`	`false`	Whether the Add button is disabled (e.g. when required selections are missing)
`showAdd`	`boolean`	`true`	Whether to show the Add button
`showSidebarToggle`	`boolean`	`false`	Whether to show the Search/Columns sidebar toggle button. Lets the index sidebar default to closed and be opened on demand.
`sidebarOpen`	`boolean`	`false`	Current open state of the sidebar (controls the toggle's pressed state).
`headerActions`	`Array<{ id: string, label: string, icon?: string, disabled?: boolean }>`	`[]`	Manifest-declared page-level actions rendered in the overflow dropdown between Refresh and the `#action-items` slot. Each entry is `{ id, label, icon?, disabled? }`. The bar emits `@header-action({ action: id, id })` on click; handler resolution happens upstream (CnIndexPage).
`documentationUrl`	`string`	`''`	When set, adds a Documentation entry to the overflow menu (after Refresh, before headerActions). Opens the URL in a new tab. Empty string hides the entry.
`documentationLabel`	`string`	`() => t('nextcloud-vue', 'Documentation')`	Label for the Documentation overflow entry.

Events

Name	Payload	Description
`view-mode-change`	—	User clicked one of the view-mode toggle buttons (Cards / Table). Payload is the selected mode string.
`toggle-sidebar`	—	User clicked the Search/Columns sidebar toggle. No payload.
`add`	—	User clicked the primary Add button. No payload.
`refresh`	—	User clicked the Refresh entry in the overflow Actions menu. The host should re-fetch the underlying list.
`header-action`	—	User clicked a manifest-declared page-level header action. Payload: `{ action: id, id }`.
`show-import`	—	User clicked the Import mass action. Host should open the import modal.
`show-export`	—	User clicked the Export mass action. Host should open the export modal.
`show-copy`	—	User clicked the Copy-selected mass action. Disabled while no row is selected.
`show-delete`	—	User clicked the Delete-selected mass action. Disabled while no row is selected.
`search`	—	Emitted when the user types in the inline search field.

Slots

Name	Bindings	Description
`filters`	—	filters Inline filter controls rendered inside the action bar, between the view toggle and the add/actions (e.g. a CnQuickFilterBar segmented toggle).
`actions`	—	actions
`action-items`	—	action-items
`mass-actions`	`count`, `selected-ids`	mass-actions

Additional props

Prop	Type	Default	Description
`showSidebarToggle`	Boolean	`false`	Whether to show the Search/Columns sidebar toggle button (lets the index sidebar default to closed and open on demand).
`sidebarOpen`	Boolean	`false`	Current open state of the sidebar (controls the toggle button's pressed state).

Try it​

Usage​

Props​

Events​

Slots​

Documentation link​

Reference (auto-generated)​

Props​

Events​

Slots​

Additional props​

Try it

Usage

Props

Events

Slots

Documentation link

Reference (auto-generated)

Props

Events

Slots

Additional props