In general, filters depend on the column type where the filter will apply. Therefore, the filter types are Text, Numeric, Date, and Binary.
There is another type of filter named Multiple Selection filter. But this type of filter can apply to Text and Numeric filters.
See the column types in the section.
Live example
live example.
Filter conditions
The following table shows the existing filter types and the conditions that apply for each of them:
Filter type
Conditions
Text
Empty, Equals, Not Equals, Contains, Not Contains, Starts With, and Ends With.
Numeric
Empty, Equals, Not Equals, Less Than, Less Than or Equals, Greater Than, Greater Than Or Equals, and Range.
Date
Empty, Equals, Not Equals, Less Than, Less Than or Equals, Greater Than, Greater Than Or Equals, and Range.
Binary
Empty, Equals, and Not Equals.
Multiple Selection
Empty, Equals, and Not Equals.
Customizing filter conditions
Since filter execution comes down to evaluating every filter condition against the data set, you will see how to implement your filter conditions per column or at the grid scope.
All custom instances do not have any defined condition. You must add or implement every filter condition.
onColumnDefInstance(columnDef: DikeGridColumnDef<Employee>): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef<Employee>('age', 'Age');
ageColumn.order = 3;
ageColumn.width = 100;
ageColumn.filterable = true;
ageColumn.sortable = true;
ageColumn.customFilterConditions = new CustomNumericFilterCondition<Employee>()
.addCondition({
text: 'Not In Close Interval [value1, value2]',
value: 'not-in-range-interval',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef<Employee, number>, values?: DikeNumericFilter) =>
!(entry.age >= values.value1 && entry.age <= values.value2)
});
//...
}
Notice how we have added the word range in the condition value (not-in-range-interval). If you omit the range word, the UI will not show the second textbox for typing a numeric value.
Date Filter
A Date Filter has the same conditions as a Numeric Filter.
Let us define some custom conditions for the Hire Date column:
We have added two existing conditions in the previous example: Greater Than and Less Than. We also defined a custom condition: Close Interval. Same as before, we added the word range to the value of the custom condition.
As you can see, the DikeGrid uses the native Date type. So do not forget to import the MatNativeDateModule or a custom implementation instead.
Binary Filter
With the Binary Filter, the user must select between two options only. Furthermore, those options are mutually exclusive by definition.
For filtering, the DikeGrid casts Binary Filters values to string values.
If you only define a Binary column as filterable, you will see the filters options as shown in the following screenshot:
We have defined the following features with the previous code snippet:
We added Equals and Not Equals conditions. If you try adding a non-valid condition, the DikeGridwill only addvalid filter conditions.
We have defined our labels and values according to the Gender column values.
Notice how we have added an initial filter for the Gender column. We tell our DikeGrid that filters the data set with a male value setting the selected property to true.
The previous filter definition generates the following output:
If you try to add a condition different from Equals, Not Equal, or Empty, the DikeGrid will throw an error. You can only overwrite the mentioned conditions.
Multiple Selection
In some cases, you want the user to select several options but a fixed number of options.
Consider the following definitions in the evaluation of the conditions:
Condition
Evaluation
Equals
The DikeGrid evaluates the selected options with the OR logical operator.
Not Equals
The DikeGrid evaluates the selected options with the AND logical operator. Then, it takes the complement of the result set.
Empty
If you add the Empty condition, it will appear as a checkbox indicating if the filtering operation includes or excludes the empty values. The latter depends on the Equals or Not Equals selection, respectively.
Multiple Text Filter
Let us define a Multiple Text Filter for the Surname column:
We have defined a new custom condition for Text types named grid-customUpperCaseText. This condition will apply to the Email column only because we have not specified any custom condition for that column. See the following screenshot.
It is essential to notice that when you define a new custom condition at the grid level, the DikeGrid will add this condition to the existing ones.
Customization by providing an Injection Token
The lowest precedence to define a new condition is by providing an Injection Token.
We have defined a new custom condition for Text types named global-customLowerCaseText. This condition will apply to the Email column only because we have not specified any custom condition for that column. See the following screenshot.
It is essential to notice that when you define a new custom condition by providing an Injection Token, the DikeGrid will add this condition to the existing ones.
Empty Values
When the DikeGrid instance filters the rows, it considers the following values as empties:
Filter type
Value
Text and Binary
null, undefined, and empty strings.
Numeric
null, undefined, and NaN values.
Date
null, undefined, and Invalid Dates.
Summary
Filters depend on the column type where the filter will apply. Apart from the column type a filter applies, there is one more type: Multiple Selection Filter, an extension of Text and Numeric filter types.
Since filter execution comes down to evaluating every filter condition, you can add or overwrite conditions.
When defining a custom condition, you must implement an object of type .
You must provide an instance of type when defining a column.
The customFilterConditions property of the is of type . Therefore, be aware of assigning the correct custom instance.
You must provide a instance for numeric types when defining a column.
You must provide a instance for Date types when defining a column.
Let us define options according to our values in our data set for the Gender column. For Binary columns, we have to provide a instance to add or overwrite conditions.
Options for Binary custom filters are of type , and you can only provide two options. If you offer more than two options, DikeGrid will ignore them.
For Multiple Text Filter conditions, you must provide a instance to a Text column type.
You can provide any number of options for Multiple Text Filter. The array you provide is of type .
For Multiple Numeric Filter conditions, you must provide a instance to a Numeric column type.
You can provide any number of options for Multiple Numeric Filter. The array you provide is of type .
You can provide an instance of type . Be aware of passing the correct instance depending on the column type. The DikeGrid will take the provided instance if the filterable flag is true.
The gridCustomFilterConditions property is of type . You can not change this property at runtime.
We recommend you define the getter function for the columns you define. For further details, see the section.
