Bulk Actions

What is this?

Bulk actions allows the user to perform actions in one or more selected items.

Usage

import { useBulkActions, BulkActions } from '@vtex/admin-ui'

function Example() {
  const state = useBulkActions({ pageItems, totalItems })

  return (
    <BulkActions state={state}>
      <Button>Action 1</Button>
      <Button>Action 2</Button>
    </BulkActions>
  )
}

Examples

Without pagination

Loading...

With Pagination

Loading...

Props

UseBulkActionsParams

The props you can pass as a parameter to the useBulkActions hook.

Name	Type	Description	Required	Default
pageItems	T[] where T extends { id: string,number }	Items of the Page	✅	-
totalItems	number	The total number of items	✅	-
pageSize	number	The number of items per page	✅	-

BulkActionState

The props returned by the useBulkActions hook.

Name	Type	Description	Default
totalItems	number	The total number of items	-
pageIds	Array<string,number>	IDs from the page items	-
getSelectedIds	() => Array<string,number>	Returns the IDs from the selected items	-
pageSelectedItems	T[]	Return the selected items from the current page	-
isItemSelected	(item: T) => boolean	Returns whether the item is selected or not	-
isVisible	boolean	Whether the BulkAction component is visible or not	-
allSelected	boolean	Whether all the items are selected or not	-
setAllSelected	Dispatch<SetStateAction<boolean>>	Sets the allSelected state	-
root	boolean, 'indeterminate'	Represents the root checkbox state	-
setRoot	Dispatch<SetStateAction<boolean>>	Sets the root checkbox state	-
selectedItemsIds	Array<string, number>	Represents the state of the checkboxes	-
setSelectedItemsIds	Dispatch<SetStateAction<Array<string, number>>>	Sets the checkboxes state	-
selectionTree	SelectionTreeState<T>	Selection tree state to be used within SelectionTree component	-

BulkActions

It also receives the same properties as the div JSX element.

Name	Type	Description	Required	Default
state	BulkActionsState<T>	Bulk actions state	✅	-

Do’s

1. The actions must always have an Icon and be of tertiary or criticalTertiary variants.