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.
The FilterField is still experimental. Be aware that the API is subject to
change.
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 = & & ;