Angular DataGrid - columns.headerFilter

Specifies data settings for the header filter.

Selector: dxo-header-filter
Type:

ColumnHeaderFilter

| undefined
Default Value: undefined

View Demo

See Also

allowSearch Deprecated

Use search.enabled instead.

Specifies whether searching is enabled in the header filter.

Type:

Boolean

Default Value: false

allowSelectAll

Specifies whether a "Select All" option is available to users.

Type:

Boolean

Default Value: true

dataSource

Specifies the header filter's data source.

Type:

Array<any>

|

Store

|

DataSource Configuration

|

Function

| null | undefined
Function parameters:
options:

Object

Data source properties.

Object structure:
Name Type Description
component

Object

The UI component's instance.
dataSource

DataSource Configuration

| null

A DataSource configuration.
Default Value: undefined

The DataGrid generates a header filter's data source automatically based on column values. Each header filter item is an object that includes the following fields:

  • text
    A text string that represents the item in the header filter.

  • value
    A filter that the item applies. It can be a single value (for example, 0) or a filter expression. Refer to the filter help topic for information on the filter expression syntax.

Use the dataSource property to change the generated data source or specify a custom data source. You can set the dataSource property to one of the following:

groupInterval

Specifies how the header filter combines values into groups.

Type:

HeaderFilterGroupInterval

|

Number

| undefined
Default Value: undefined

If you specify a custom header filter data source, groupInterval accepts only string arrays that contain group fields for hierarchical header filters.

For numeric columns, assign a number that specifies the size of generated groups. For an example of this groupInterval implementation, refer to the following demo:

DataGrid - Filtering Demo

For date columns, set this property to a HeaderFilterGroupInterval value. This value indicates the smallest available filter value. For instance, the "day" value allows you to filter date columns by a specific day.

The default header filter for date columns is hierarchical. To implement a non-hierarchical header filter, set groupInterval to null and specify the calculateFilterExpression function:

jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            dataType: 'date',
            headerFilter: {
                groupInterval: null
            },
            calculateFilterExpression(value, operation, target) {
                if(value && target === "headerFilter") {
                    return [this.dataField, operation, value];
                }
                return this.defaultCalculateFilterExpression.apply(this, arguments);
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
    <dxi-column ...
        dataType="date"
        [calculateFilterExpression]="calculateFilterExpression">
        <dxo-header-filter
            [groupInterval]="null"
        ></dxo-header-filter>
    </dxi-column>
</dx-data-grid>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    calculateFilterExpression(value, operation, target) {
        const column = this as any;

        if(value && target === "headerFilter") {
            return [column.dataField, operation, value];
        }
        return column.defaultCalculateFilterExpression.apply(column, arguments);
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn ...
            data-type="date"
            :calculate-filter-expression="calculateFilterExpression">
            <DxHeaderFilter
                :group-interval="null"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDataGrid, DxColumn, DxHeaderFilter } from 'devextreme-vue/data-grid';

function calculateFilterExpression(value, operation, target) {
    const column = this;

    if(value && target === "headerFilter") {
        return [column.dataField, operation, value];
    }
    return column.defaultCalculateFilterExpression.apply(column, arguments);
}
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { DataGrid, Column, HeaderFilter } from 'devextreme-react/data-grid';

function calculateFilterExpression (value, operation, target) {
    if(value && target === "headerFilter") {
        return [this.dataField, operation, value];
    }
    return this.defaultCalculateFilterExpression.apply(this, arguments);
}

export default function App() {
    return (
        <DataGrid ... >
            <Column ...
                dataType="date"
                calculateFilterExpression={calculateFilterExpression}>
                <HeaderFilter
                    groupInterval={null}
                />
            </Column>
        </DataGrid>
    );
}

height

Specifies the height of the popup menu containing filtering values.

Type:

Number

|

String

| undefined
Default Value: undefined

search

Configures the header filter's search functionality.

Selector: dxo-search
Type:

ColumnHeaderFilterSearchConfig

searchMode Deprecated

Use search.mode instead.

Specifies a comparison operation used to search header filter values.

Type:

SearchMode

Default Value: 'contains'

width

Specifies the width of the popup menu containing filtering values.

Type:

Number

|

String

| undefined
Default Value: undefined