Box
Row
Map
Vue

headerFilter

Specifies data settings for the header filter.

Type:

Object

Default Value: undefined

allowSearch

Specifies whether searching is enabled in the header filter.

Type:

Boolean

Default Value: false

View Demo

NOTE
With the ODataStore, searching a numeric column requires additional configuration: set the column's headerFilter.searchMode to "equals" and specify the type of the column's data field in the store's fieldTypes property.

dataSource

Specifies the header filter's data source.

Function parameters:
options:

Object

Data source properties.

Object structure:
Name Type Description
component

Object

The UI component's instance.

dataSource

DataSource Configuration

A DataSource configuration.

Default Value: undefined

The DataGrid generates a header filter's data source automatically based on column values. Use the dataSource property to change the generated data source or specify a custom data source. Refer to the following help topic for more information: Customize Header Filter Data Source.

groupInterval

Specifies how the header filter combines values into groups. Does not apply if you specify a custom header filter data source.

Type:

String

|

Number

Default Value: undefined
Accepted Values: 'day' | 'hour' | 'minute' | 'month' | 'quarter' | 'second' | 'year'

For numeric columns, assign a number to this property. This number designates a step with which to generate groups. Column values are classified into these groups.

View Demo

For date columns, set this property to one of the accepted string values above. Dates are grouped into a hierarchy, and the string value indicates its lowest level. The default level is "day" which means that the header filter forms the following hierarchy: Year → Month → Day. You can disable the hierarchical display if you set the groupInterval to null. In this case, you also need to implement the column's calculateFilterExpression function as follows:

jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            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 ...
        [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 ...
            :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';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxHeaderFilter
    },
    data() {
        return {
            calculateFilterExpression(value, operation, target) {
                const column = this as any;

                if(value && target === "headerFilter") {
                    return [column.dataField, operation, value];
                }
                return column.defaultCalculateFilterExpression.apply(column, arguments);
            }
        }
    }
}
</script>
React
App.js
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 ...
                calculateFilterExpression={calculateFilterExpression}>
                <HeaderFilter
                    groupInterval={null}
                />
            </Column>
        </DataGrid>
    );
}

height

Specifies the height of the popup menu containing filtering values.

Type:

Number

Default Value: undefined

searchMode

Specifies a comparison operation used to search header filter values.

Type:

String

Default Value: 'contains'
Accepted Values: 'contains' | 'startswith' | 'equals'

width

Specifies the width of the popup menu containing filtering values.

Type:

Number

Default Value: undefined