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
*/
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: ;
}) => ;
};FilterField.Suggestions
You can use the FilterField.Suggestions component to render a list of
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 = & & ;