# In-line Filters
## Live example
{% hint style="success" %}
[In-line Filters](https://demos.dikesoft.com/dk-grid/filtering/in-line-filters) live example.
{% endhint %}
## Enabling In-line Filters
To enable the In-line Filters, you must provide an input property named `allowRowFiltering` at grid scope.
{% code title="in-line-filters.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) and click on the **Row Filter** checkbox of the **Filtering** group.
{% hint style="info" %}
You do not have to define every column as filterable to enable the In-line filters.
{% endhint %}
As you can see, the DikeGrid shows a textbox for every defined column. Thus, In-line filters are the **quickest** and **easiest** way to enable filtering.
When you enable the In-line Filters, the DikeGrid registers them automatically, appending the suffix ***row-filter*** to the column id.
When you hide In-line Filters, the DikeGrid removes them automatically, as well.
{% hint style="success" %}
Open the **dev console** to see the `registerFilterableChange` and `deregisterFilterableChange` events output.
{% endhint %}
## Customizing the In-line Filters row
You can change the row's **height** where the DikeGrid shows the In-line Filters.
{% hint style="info" %}
For further details, see the [Grid Structure - Row Filter](https://docs.dikesoft.com/fundamentals/grid-structure/row-filter#changing-the-row-filter-row-height) section.
{% endhint %}
## In-line Filters conditions
By definition, In-line Filters only have **one filter condition**. The following table shows the filter type and its corresponding default condition:
| Filter type | Default condition |
| ------------------- | ----------------- |
| `Text` and `Binary` | Contains |
| `Numeric` | Equals |
| `Date` | Equals |
{% hint style="info" %}
Be aware that **Binary** Filters become **Text** Filters.
{% endhint %}
## Customizing conditions
You can change the condition of the in-line Filters in two ways: by providing an **Injection Token** or for a specific **grid** instance.
### Customization by providing an Injection Token
To change the default condition, you must provide the corresponding custom instance to the following Injection Tokens:
| Injection Token | Custom instance |
| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `CUSTOM_ROW_TEXT_FILTER_CONDITIONS` | [`CustomRowTextCaseFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customrowtextcasefiltercondition-less-than-t-greater-than) |
| `CUSTOM_ROW_NUMERIC_FILTER_CONDITIONS` | [`CustomRowNumericFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customrownumericfiltercondition-less-than-t-greater-than) |
| `CUSTOM_ROW_DATE_FILTER_CONDITIONS` | [`CustomRowDateFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customrowdatefiltercondition-less-than-t-greater-than) |
Let us define a condition for `Text` In-line Filters.
{% code title="filtering.module.ts" %}
```typescript
@NgModule({
providers: [
{
provide: CUSTOM_ROW_TEXT_FILTER_CONDITIONS,
useFactory: (): CustomRowTextCaseFilterCondition =>
new CustomRowTextCaseFilterCondition()
.addExistingCondition(ConditionType.ENDS_WITH)
}
]
})
export class FilteringModule { }
```
{% endcode %}
With the previous code snippet, we have changed the default condition to be **Ends With** for `Text` In-line Filters.
{% hint style="warning" %}
If you add more than one condition to the custom instance, the DikeGrid will take only the first one.
{% endhint %}
### Customization at the grid level
When you provide an Injection Token, you are changing conditions for all DikeGrid instances that live under the place you give the Injection Token.
Sometimes, you want to be specific for a particular DikeGrid instance. Then, to change conditions at the grid scope, you must provide the corresponding custom instance through an input property named `gridCustomFilterConditions`.
{% hint style="info" %}
The `gridCustomFilterConditions` property is of type [`DikeGridCustomFilterConditions`](https://docs.dikesoft.com/reference/type-aliases/filtering#dikegridcustomfilterconditions-less-than-t-greater-than). You **can not change** this property at **runtime**.
{% endhint %}
Let us provide custom conditions for `Date` and `Numeric` types.
{% tabs %}
{% tab title="in-line-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="in-line-filters.component.ts" %}
```typescript
ngOnInit(): void {
//...
// Defining filters at DikeGrid instance level:
this.gridCustomConditions = {
customRowDateFilterConditions: new CustomRowDateFilterCondition()
.addExistingCondition(ConditionType.GREATER_THAN),
customRowNumericFilterConditions: new CustomRowNumericFilterCondition()
.addCondition({
text: 'Custom Row Numeric',
value: 'grid-customRowNumericMultipleOf',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeNumericFilter): boolean =>
dataColumnDef.getValue(entry) % values.value1 === 0
})
};
}
```
{% endtab %}
{% endtabs %}
We have changed the `Date` condition to be **Greater Than** and the `Numeric` condition to be **grid-customRowNumericMultipleOf**.
For `Date` types, we took an existing condition, and for `Numeric` types, we defined a new custom condition.
## Summary
In-line Filters are the **quickest** and **easiest** way to enable filtering. Every filter type has a default condition attached, but you can change it by providing a custom condition definition.
### Complete code for this section.
{% tabs %}
{% tab title="in-line-filters.component.html" %}
```markup