Filter

A resuable filter component that can provide suggestions and validation to users. It generates a consistant search string that can be used to query data.

React

ready

Docs|Storybook|Source

Props

Filter

Name	Default	Description
id Required		`string` ID of the Filter Component
className		`string` CSS class to apply at the root element of the component
onChange		`(value: string) => void` Change event callback, passing the updated filter value
onParse		`(request: FilterQuery) => void` Event callback, triggered by the filter query being parsed, and passing the updated filter query request
onSubmit		`(request: FilterQuery, eventType: SubmitEvent) => void` Submit event callback, triggered by Enter or pressing Submit, and passing the updated filter query and the originating event type
providers Required		`any[]` Array of FilterProviders and NestedFilterProviders that are being used/supported
advancedFilterDialogRef		`React.RefObject<AdvancedFilterDialogRef>` React Ref to the input element
context		`Record<string, string>` Context to be applied for all API queries
customParser		`Parser<FilterQuery>` EXPERIMENTAL Custom parser to use for filtering instead of the default FilterQueryParser. NOTE: Using a custom parser is experimental and may be removed in the future.
filterButtonVariant		`FilterButtonVariant` Variant of the filter button, whether to show the title or just the icon
initialFilterValue		`string` Initial value to use for the input. DO NOT USE in conjunction with `filterValue`. Only use this if you want the Filter to have an initial value but remain uncontrolled.
filterValue		`string` Supplied filter value to use. By using this, the Filter is externally controlled and will not use it's own state.
inputRef		`React.RefObject<HTMLInputElement>` React Ref to the input element
label Required		`string` Label displayed atop the Filter bar. This is only shown when `visuallyHideLabel` is `false`
onKeyDown		`React.KeyboardEventHandler<Element>` Input keydown event callback
onValidation		`(messages: string[], filterQuery: FilterQuery) => void` Validation callback, passing the validation message and the validation query
placeholder		`string` Placeholder text for the input
settings		`FilterSettings` Settings for the Filter, such as support of the legacy No filter provider and alias matching
showClearButton		`boolean` Whether or not the clear query button should be shown. Defaults to true
showValidationMessage		`boolean` Whether to show any validation messages or not. If this is disabled, use `onValidation` to receive the messages to display elsewhere
trailingVisual		`React.ReactElement<any, string \| React.JSXElementConstructor<any>>` Add a trailing visual element after the input but before the clear button
variant		`FilterVariant` Variant of the Filter to render. `button` or `input` for one or the other, `full` (default) renders both.
visuallyHideLabel		`boolean` Whether to visually hide the Label or not

Filter

Internal Component