BulkActions
A set of actions to perform on one or more selected items.
- Beta
Buy Pro
- 0.38.0 (latest)
Import
BulkActions
: The container component, manages state and composition.
import { BulkActions } from '@saas-ui-pro/react'
Usage
BulkActions will be visible when there are one or more selections
.
The BulkActions component is best used in combination with DataGrid.
Basic
<BulkActions selections={['1']} width="400px"><Button>Delete</Button></BulkActions>
Customize title
The title can be customized for localization or specifying what is selected.
<BulkActionstitle=":selections email(s) selected"selections={['1']}width="400px"><Button>Delete</Button></BulkActions>
Multiple actions
import {Button,Icon,Menu,MenuButton,MenuList,MenuItem,Portal,} from '@chakra-ui/react'import { BulkActions } from '@saas-ui-pro/react'import { FiArchive, FiTrash } from 'react-icons/fi'export default function MultipleActions() {return (<BulkActions selections={['1']} width="400px"><Menu><MenuButton as={Button} leftIcon={<Icon as={FiArchive} />}>Move to</MenuButton><Portal><MenuList><MenuItem>Inbox</MenuItem><MenuItem>Spam</MenuItem></MenuList></Portal></Menu><Button leftIcon={<Icon as={FiTrash} />}>Delete</Button></BulkActions>)}
Position & transtion
You can change the transition animation using motionPreset
, supported presets are slideOutTop
, slideOutBottom
, fade
, scale
, none
.
import { Box, Button } from '@chakra-ui/react'import { BulkActions } from '@saas-ui-pro/react'export default function Position() {const [state, setState] = useState(['1'])return (<><Button onClick={() => setState(['1'])}>Select</Button><BulkActionsselections={state}width="400px"top="10px"bottom="auto"motionPreset="slideOutTop"><Button onClick={() => setState([])}>Delete</Button></BulkActions></>)}
Custom styles
import { Box, Button } from '@chakra-ui/react'import { BulkActions } from '@saas-ui-pro/react'export default function CustomStyles() {const [state, setState] = useState(['1'])return (<><Button onClick={() => setState(['1'])}>Select</Button><BulkActionsselections={state}colorScheme="primary"motionPreset="slideOutTop"variant="solid"sx={{bottom: '40px',top: '0',left: 0,right: 0,bottom: 'auto',boxShadow: 'md',}}><Button onClick={() => setState([])}>Delete</Button></BulkActions></>)}
Was this helpful?