FilterField
The FilterField component is a text-based input component that allows users to
enter filters using an intuitive and easily understandable syntax. Since the
input is text-based, users can always enter anything they want. To provide
guidance to the user, we recommend always using the FilterField in combination
with suggestions.
FilterFieldProps
Signature:
export declare type FilterFieldProps = < & & & <, (value: , tree: , isValid: ) => > & {
/**
* Placeholder text displayed when the filter field is empty.
* @defaultValue
*/
placeholder?: ;
/**
* The syntax used for parsing the input.
* The basic syntax uses a narrowed down set of rules, not supporting grouping
* and logical . The complex syntax provides the full set of rules.
* @defaultValue
* @deprecated The basic syntax will no longer be supported after the next breaking change. The syntax will default to `complex` and the `syntax` prop will be removed.
*/
syntax?: | ;
/**
* Whether the automatically determined suggestions (logical / comparison operators) should be shown.
* If set to true, the suggestions will automatically be added to the suggestions overlay.
* @defaultValue false
*/
autoSuggestions?: ;
/**
* Callback triggered when the suggestions may need to be updated.
* @defaultValue
*/
onSuggest?: ;
/**
* Callback triggered when the user submits the currently entered filter for filtering.
* @defaultValue
*/
onFilter?: (filterState: {
/** The current value of the filter field. */
value: ;
/** Syntax tree of the current value. */
syntaxTree: ;
/** Whether the current value is valid. */
isValid: ;
}) => ;
/** Validators to restrict allowed keys and their operators. */
validatorMap?: ;
/** Config to enable new nodes in the . */
parserConfig?: {
/**
* Whether search operators are enabled in the filter field. If set to false,
* they will be marked as error and returned accordingly in the syntax tree.
* @defaultValue false
* @deprecated With the next breaking change cycle, the SearchOperator node will be returned by default
*/
searchConversion?: ;
/**
* Whether a key will be converted to a JSONPath node if a JSONPath is entered in the FilterField.
* If set to false, they will be marked as error and returned accordingly in the syntax tree.
* @defaultValue false
* @deprecated With the next breaking change cycle, the jsonPathConversion will be enabled by default
*/
jsonPathConversion?: ;
};
/**
* Namespace identifying the used key for the recent and saved filters storage.
* Defaults currently to and will default to `` with the next breaking change.
* Set the value to `` if you want to opt out of the recent and saved filters api.
* @defaultValue
*
*/
filterNamespace?: | ;
}>;FilterField.Suggestions
The FilterField.Suggestions component to render a list of suggestions is
optional, but can be used to set options specific to the suggestions.
FilterFieldSuggestionsProps
Signature:
export declare type FilterFieldSuggestionsProps = & & & {
/** Whether the suggestions are loading. If true, a loading indicator is shown and otherwise the suggestions are shown. */
loading?: ;
};FilterField.Suggestion
Use the FilterField.Suggestion component for each suggestion list entry.
FilterFieldSuggestionProps
Signature:
export declare type Props = < & & & >;FilterField.SuggestionDetails
Use the FilterField.SuggestionDetails component inside a
FilterField.Suggestion to provide additional information.
FilterFieldSuggestionDetailsProps
Signature:
export declare type FilterFieldSuggestionDetailsProps = & & ;FilterField.SuggestionGroup
Use the FilterField.SuggestionGroup to add separators between groups of
related suggestions.
FilterFieldSuggestionGroupProps
Signature:
export declare type FilterFieldSuggestionGroupProps = & & & ;FilterField.SuggestionGroupLabel
To label a set of grouped suggestions, use the
FilterField.SuggestionGroupLabel component.
FilterFieldSuggestionGroupLabelProps
Signature:
export declare type FilterFieldSuggestionGroupLabelProps = & & & ;