Vue Data Grid

Filter Conditions

vue logo

This section describes the Filter Conditions shared by the three Simple Filters provided by the grid - Text Filter, Number Filter and Date Filter.

Each Simple Filter follows the same layout. The filter consists of one or more Filter Conditions separated by zero or more Join Operators.

The only layout difference is the type of input field presented to the user: a text field for Text Filters, a number field for Number Filters, and a date picker field for Date Filters.

Filter Options

Each filter provides a dropdown list of filter options to select from. Each filter option represents a filtering strategy, e.g. 'equals', 'not equals', etc.

Each filter's default filter options can be found on their respective pages:

Information on defining Custom Filter Options can be found below.

Filter Value

Each filter option takes zero (a possibility with custom options), one (for most) or two (for 'inRange') values. The value type depends on the filter type, e.g. the Date Filter takes Date values.

Number of Conditions

By default each filter initially only displays one Filter Condition. When the user completes all the visible Filter Conditions, another Filter Condition becomes visible. When the user clears the last completed Filter Condition, any empty Filter Conditions on either side are hidden if required. Additionally, when the filter is closed, any empty Filter Conditions not at the end are removed if required.

The maximum number of Filter Conditions can be controlled by setting the Filter Parameter maxNumConditions (the default value is two).

It is also possible to always display a certain number of Filter Conditions by setting the Filter Parameter numAlwaysVisibleConditions. In this case, Filter Conditions at the end will be disabled until the previous Filter Condition has been completed.