FilterMultiple

Filters are supposed to be used in pages or sections that display some kind of data that can be filtered. The filterMultiple component is a picker that displays filter options and allows for many of them to be selected. When the options are selected and the changes applied, it should generate a change on the data or content being displayed, and should be filtered accordingly.

Usage

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

function Example() {
  const state = 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',
  })
  return <FilterMultiple state={state} />
}

Examples

Initial values

const FilterMultiple = experimental_FilterMultiple
const useFilterMultipleState = experimental_useFilterMultipleState

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

  return <FilterMultiple state={state} />


}

render(<Example />)

I18n

The filter-multiple has default translations. Wrap your app with I18nProvider to configure the locale.

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

function Filter() {
  const state = 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',
  })
  return <FilterMultiple state={state} />
}

function RootApp() {
  return (
    <I18nProvider locale="ko-KO">
      <Filter />
    </I18nProvider>
  )
}

render(<RootApp />)

Props

FilterMultiple

Name	Type	Description	Required	Default
state	FilterMultipleState	Object that manages the component state logic, you can obtain it calling the useFilterMultipleState hook	✅	-

UseFilterMultipleState

Name	Type	Description	Required	Default
items	FilterItem[]	List of options for the filter, item must include id and label	✅	-
onChange	({selected: string[]}) => void	Callback called with current selected ids on apply and clear press.	✅	-
label	string	Filter button label	✅	-
initialApplied	string[]	Array with initially applied options' ids	🚫	-
baseId	string	Optional baseId for controling the components and its childrens id	🚫	-

FilterMultipleState (return of UseFilterMultipleState)

Name	Type	Description
menu	MenuState	State that controls the component's popover menu
combobox	ComboboxState	State that controls the component's option list
onClear	() => void	Function used by the component when clear is selected
onChange	() => void	Function used by the component when apply is selected
appliedItems	FilterItem[]	List of items that are currently applied
appliedKeys	ID[]	List of ids that are currently applied
selectedKeys	ID[]	List of ids that are currently selected
items	FilterItem[]	List of options for the filter