Filters
Intuitive data filtering components.
Props#
FiltersProvider#
| Prop | Type | Default | Description |
|---|---|---|---|
| activeFilters | Filter[] | ||
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| 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 |
|---|---|---|---|
itemsrequired | 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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| 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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| 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[]) => 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 |
|---|---|---|---|
idrequired | string | ||
| defaultOperator | FilterOperatorId | ||
| defaultValue | string | number | boolean | string[] | Date | ||
| formatLabel | (label?: string | undefined) => string | Custom label formatter | |
| formatValue | (value: FilterValue) => string | Format the value of the filter, eg timestamps, numbers, etc. | |
| icon | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| 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 | Enable multiple select | |
| onChange | (filter: Filter) => void | ||
| onOperatorChange | (id: FilterOperatorId) => void | ||
| onRemove | () => void | ||
| onValueChange | (value: FilterValue) => void | ||
| operator | FilterOperatorId | ||
| operators | FilterItem[] | ||
| renderValue | FilterRenderFn | Render the value of the filter, can render custom components like inputs.
Return undefined to use the default value rendering | |
| 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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| 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#
FilterItem#
| Prop | Type | Default | Description |
|---|---|---|---|
idrequired | 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?