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	✅	-