With the filter component, lists and views can be filtered.
The content affected by the filter is dependent on the filters position. If the filter is placed on top of a view, the filter applies to all components and contents underneath it. All filter terms are connected with the logical AND operator if no other operator is explicitly used.
Filter field styles
Key-value filter styles
Applied filters can be displayed as key:value pairs.
Free text filters
Free text can be used in filters, the typed text will be suggested on top, focused and selected on enter key.
The applied free text filters are displayed in quotes.
Free text in key:value filters
It is valid to filter for key:values where the value contains a specific free text. The free text values are displayed with a ~ in front.
On focus of the filter field the dropdown panel expands and reveals valid items.
The suggested items can be redefined by typing.
A key:value filter can be edited by selecting it, all possible values for the key are presented in the dropdown again. The selected value is highlighted.
By triggering the clear all button, all filters are deleted. This button appears on focus loss of the filter field. Please also check out this behavior in the click dummy
Some keys ask for custom values, e.g. response time, CPU, failure rate, etc.
Input fields in the dropdown provide the possibility of entering a range.
By leaving the second input field blank, the filter will be set to everything >= entered value.
The styling for the tabs is the same as the chart tabs.
By default, all filter terms are handled as AND operations. However, the filter results can use other operators like OR, NOT, (, ), * ...
All used operators are highlighted as soon as they are active and can be edited by selecting them.
Multiselection of filter values
To select multiple values, use the operator IN, or select several values from the dropdown.
Help and errors
To make users aware of the operators, the options will appear when the filter field is focused and at least one filter is already applied.
The filter fields syntax is validated, please consider the input field validation in the validation guidelines for details.
Abbreviations for long names
By default, filters should not extend 50 characters. Long names can be abbreviated with three dots .... The full name is visible when clicking the filter (edit mode).
DO NOT USE IN PRODUCTION!
This component is WIP and therefore experimental.