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
Name | Type | Description | Required | Default |
---|---|---|---|---|
state | FilterGroupState | Object that manages the component state logic, you can obtain it calling the useFilterGroupState hook | ✅ | - |
csx | StyleObject | Custom styles | 🚫 | {} |
useFilterGroupState
Name | Type | Description | Required | Default |
---|---|---|---|---|
filterStates | FilterState[] | Array of filter states, add the state of each child filter | ✅ | - |