This library is still in development and is available only for internal usage at VTEX.
Skip to main content

FilterGroup

Version: 0.131.0

FilterGroup

Filters are supposed to be used in pages or sections that display some kind of data that can be filtered. The FilterGroup component groups different filters in the same row and provides a "clear all" button that triggers the "clear action" for each one of the filters.

Usage

import {
experimental_FilterMultiple as FilterMultiple,
experimental_useFilterMultipleState as useFilterMultipleState,
experimental_useFilterGroupState as useFilterGroupState,
experimental_FilterGroup as FilterGroup,
} from '@vtex/admin-ui'

function Example() {
const filterState = useFilterMultipleState({
items: [
{ label: 'Full', value: 1, id: '#1' },
{ label: 'Empty', value: 2, id: '#2' },
{ label: 'Half empty', value: 4, id: '#3' },
],
onChange: ({ selected }) => console.log(`applied: ${selected}`),
label: 'Status',
})

const state = useFilterGroupState({filterStates: [filterState]})

return (
<FilterGroup state={state}>
<FilterMultiple state={filterState} />
</FilterGroup>
)
}

Example

const FilterMultiple = experimental_FilterMultiple
const useFilterMultipleState = experimental_useFilterMultipleState
const FilterGroup = experimental_FilterGroup
const useFilterGroupState = experimental_useFilterGroupState

function Example() {
const filterState = useFilterMultipleState({
items: [
{ label: 'Full', value: 1, id: '#1' },
{ label: 'Empty', value: 2, id: '#2' },
{ label: 'Half empty', value: 4, id: '#3' },
],
onChange: ({ selected }) => console.log(`applied: ${selected}`),
label: 'Status',
})

const state = useFilterGroupState({filterStates: [filterState]})

return (
<FilterGroup state={state}>
<FilterMultiple state={filterState} />
</FilterGroup>
)
}

render(<Example />)

Props

FilterGroup

NameTypeDescriptionRequiredDefault
stateFilterGroupStateObject that manages the component state logic, you can obtain it calling the useFilterGroupState hook-
csxStyleObjectCustom styles🚫{}

useFilterGroupState

NameTypeDescriptionRequiredDefault
filterStatesFilterState[]Array of filter states, add the state of each child filter-