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 being returned in the
* @deprecated With the next breaking change cycle the Variable and the BigInt node will be returned by default
*/
parserConfig?: {
/**
* Whether variable are returned as a Variable node. If set to false, Variables will be returned as a node
* @defaultValue false
*/
variableConversion?: ;
/**
* Whether s larger than Number.MAX_SAFE_INTEGER are returned as a BigInt node.
* If false, such s will be returned as nodes, possibly leading to unexpected results due to javascript limitations.
* @defaultValue false
*/
bigIntConversion?: ;
};
}>;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 = & & ;