Filters

Intuitive data filtering components.

Props#

FiltersProvider#

Prop	Type	Default	Description
activeFilters	`Filter[]`
children	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
defaultFilters	`Filter[]`
filters	`FilterItem[]`
onBeforeEnableFilter	`( filter: Filter, filterItem?: FilterItem \| undefined, ) => Promise<Filter>`
onChange	`(activeFilters: Filter[]) => void`
operators	`FilterOperators<Operator, Type>`

FilterMenu#

Prop	Type	Default	Description
items`required`	`FilterItems`
arrowPadding	`number`	`8`	The padding required to prevent the arrow from reaching the very edge of the popper.
autoSelect	`boolean`	`true`	If `true`, the first enabled menu item will receive focus and be selected when the menu opens.
boundary	`HTMLElement \| "clippingParents" \| "scrollParent"`	`clippingParents`	The boundary area for the popper. Used within the `preventOverflow` modifier
buttonProps	`ButtonProps`
closeOnBlur	`boolean`	`true`	If `true`, the menu will close when you click outside the menu list
closeOnSelect	`boolean`	`true`	If `true`, the menu will close when a menu item is clicked
command	`string`
computePositionOnMount	`boolean`
defaultIsOpen	`boolean`
direction	`"ltr" \| "rtl"`		If `rtl`, proper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse
eventListeners	`type ONLY_FOR_FORMAT = \| boolean \| { scroll?: boolean \| undefined resize?: boolean \| undefined }`	`true`	If provided, determines whether the popper will reposition itself on `scroll` and `resize` of the window.
flip	`boolean`	`true`	If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
gutter	`number`	`8`	The distance or margin between the reference and popper. It is used internally to create an `offset` modifier. NB: If you define `offset` prop, it'll override the gutter.
icon	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
id	`string`
initialFocusRef	`RefObject<{ focus(): void }>`		The `ref` of the element that should receive focus when the popover opens.
inputDefaultValue	`string`
inputValue	`string`
isLazy	`boolean`	`false`	Performance 🚀: If `true`, the MenuItem rendering will be deferred until the menu is open.
isOpen	`boolean`
label	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
lazyBehavior	`LazyMode`	`unmount`	Performance 🚀: The lazy behavior of menu's content when not visible. Only works when `isLazy={true}` - "unmount": The menu's content is always unmounted when not open. - "keepMounted": The menu's content initially unmounted, but stays mounted when menu is open.
listProps	`MenuListProps`
matchWidth	`boolean`	`false`	If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
modifiers	`Partial<Modifier<string, any>>[]`		Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
multiple	`boolean`
offset	`[number, number]`		The main and cross-axis offset to displace popper element from its reference element.
onChange	`(value?: FilterValue \| undefined) => void`
onClose	`() => void`
onInputChange	`( value: string, activeItemId?: string \| undefined, ) => void`
onOpen	`() => void`
onSelect	`(item: FilterItem \| FilterItem[]) => Promise<void>`
placeholder	`string`
placement	`PlacementWithLogical`	`bottom`	The placement of the popper relative to its reference.
preventOverflow	`boolean`	`true`	If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
strategy	`"fixed" \| "absolute"`	`absolute`	The CSS positioning strategy to use.
value	`string \| number \| boolean \| string[] \| Date`

ActiveFilter#

Prop	Type	Default	Description
id`required`	`string`
defaultOperator	`FilterOperatorId`
defaultValue	`string \| number \| boolean \| string[] \| Date`
formatLabel	`(label?: string \| undefined) => string`
formatValue	`(value: FilterValue) => string`
icon	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
isAttached	`boolean`	`false`	If `true`, the borderRadius of button that are direct children will be altered to look flushed together
isDisabled	`boolean`	`false`	If `true`, all wrapped button will be disabled
items	`FilterItems`
label	`string`
multiple	`boolean`
onChange	`(filter: Filter) => void`
onOperatorChange	`(id: FilterOperatorId) => void`
onRemove	`() => void`
onValueChange	`(value: FilterValue) => void`
operator	`FilterOperatorId`
operators	`FilterItem[]`
renderValue	`FilterRenderFn`
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`	`'0.5rem'`	The spacing between the buttons
type	`FilterType`
value	`string \| number \| boolean \| string[] \| Date`

ActiveFiltersList#

Prop	Type	Default	Description
align	`ResponsiveValue<AlignItems>`		The `align-items` value (for main axis alignment)
direction	`ResponsiveValue<FlexDirection>`		The `flex-direction` value
formatValue	`(value: FilterValue) => string`
justify	`ResponsiveValue<JustifyContent>`		The `justify-content` value (for cross-axis alignment)
renderValue	`FilterRenderFn`
shouldWrapChildren	`boolean`	`false`	If `true`, the children will be wrapped in a `WrapItem`
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`		The space between each child (even if it wraps)
spacingX	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`		The horizontal space between the each child (even if it wraps). Defaults to `spacing` if not defined.
spacingY	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`		The vertical space between the each child (even if it wraps). Defaults to `spacing` if not defined.

NoFilteredResults#

Prop	Type	Default	Description
children	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`
clearLabel	`string`
onReset	`() => void`
resource	`string`
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`
title	`string`

Types#

Filter#

Prop	Type	Description
contains`required`	`(string: string, substring: string) => boolean`	Returns whether a string contains a given substring.
endsWith`required`	`(string: string, substring: string) => boolean`	Returns whether a string ends with a given substring.
startsWith`required`	`(string: string, substring: string) => boolean`	Returns whether a string starts with a given substring.

Prop	Type	Description
id`required`	`string`	The filter id
activeLabel	`string`	The active filter label e.g. "Contact"
defaultOperator	`FilterOperatorId`	The default operator
icon	`ReactElement<any, string \| JSXElementConstructor<any>>`	Icon displayed before the label
items	`FilterItems`	The available
label	`string`	The filter label e.g. "Contact is lead"
multiple	`boolean`	Enable multiple select if true
operators	`FilterOperatorId[]`	The available operators
type	`FilterType`	The filter type
value	`string \| number \| boolean \| string[] \| Date`	The filter value

Was this helpful?

Filters

FiltersProvider#

FilterMenu#

ActiveFilter#

ActiveFiltersList#

NoFilteredResults#

Types#

Filter#

FilterItem#