To define a data source, set the dataSource property to an array of objects. Each object configures one header filter item and should have 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.

The following code shows how to specify a custom data source:

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: [{
                    text: "Zero",
                    value: 0
                }, {
                    text: "Less than $3000",
                    value: ["SaleAmount", "<", 3000]
                }, {
                    text: "More than $3000",
                    value: ["SaleAmount", ">", 3000]
                }]
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >
    <dxi-column>
        <dxo-header-filter
            [dataSource]="headerFilterData">
        </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 {
    headerFilterData: any;
    constructor() {
        this.headerFilterData = [{
            text: "Zero",
            value: 0
        }, {
            text: "Less than $3000",
            value: ["SaleAmount", "<", 3000]
        }, {
            text: "More than $3000",
            value: ["SaleAmount", ">", 3000]
        }];
    }
}

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>
            <DxHeaderFilter
                :data-source="headerFilterData"
            />
        </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 {
            headerFilterData: [{
                text: 'Zero',
                value: 0
            }, {
                text: 'Less than $3000',
                value: ['SaleAmount', '<', 3000]
            }, {
                text: 'More than $3000',
                value: ['SaleAmount', '>', 3000]
            }]
        };
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const headerFilterData = [{
    text: 'Zero',
    value: 0
}, {
    text: 'Less than $3000',
    value: ['SaleAmount', '<', 3000]
}, {
    text: 'More than $3000',
    value: ['SaleAmount', '>', 3000]
}];

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Column>
                    <HeaderFilter
                        dataSource={headerFilterData}
                    />
                </Column>
            </DataGrid>
        );
    }
}

export default App;

View Demo

Map Data Source Fields

Header filter data objects should have the text and value fields. However, data objects fetched from a server may not have these fields. In this case, map the original data source to the text + value structure. A mapped data source should also include key fields from the original data source.

NOTE

Keep the allowSearch property set to false because searching produces incorrect results when data source fields are mapped.

In the following code, the categoryName and categoryId fields are mapped to the text and value fields. The mapped objects also contain the categoryId and categoryCode key fields:

jQuery

index.js

$(function() {
    const categoriesStore = new DevExpress.data.ArrayStore({
        data: [
            { categoryName: "...", categoryId: 1, categoryCode: "..." },
            // ...
        ],
        key: ["categoryId", "categoryCode"]
    });

    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: {
                    store: categoriesStore,
                    map: function (item) {
                        return {
                            text: item.categoryName,
                            value: item.categoryId,
                            categoryId: item.categoryId,
                            categoryCode: item.categoryCode
                        }
                    }
                }
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >
    <dxi-column>
        <dxo-header-filter
            [dataSource]="headerFilterData">
        </dxo-header-filter>
    </dxi-column>
</dx-data-grid>

import { Component } from '@angular/core';
import ArrayStore from 'devextreme/data/array_store';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    headerFilterData;
    constructor() {
        const categoriesStore = new ArrayStore({
            data: [
                { categoryName: "...", categoryId: 1, categoryCode: "..." },
                // ...
            ],
            key: ["categoryId", "categoryCode"]
        });

        this.headerFilterData = {
            store: categoriesStore,
            map: (item) => {
                return {
                    text: item.categoryName,
                    value: item.categoryId,
                    categoryId: item.categoryId,
                    categoryCode: item.categoryCode
                }
            }
        };
    }
}

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>
            <DxHeaderFilter
                :data-source="headerFilterData"
            />
        </DxColumn>
    </DxDataGrid>
</template>

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

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

const categoriesStore = new ArrayStore({
    data: [
        { categoryName: "...", categoryId: 1, categoryCode: "..." },
        // ...
    ],
    key: ["categoryId", "categoryCode"]
});

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxHeaderFilter
    },
    data() {
        return {
            headerFilterData: {
                store: categoriesStore,
                map: (item) => {
                    return {
                        text: item.categoryName,
                        value: item.categoryId,
                        categoryId: item.categoryId,
                        categoryCode: item.categoryCode
                    }
                }
            }
        };
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const categoriesStore = new ArrayStore({
    data: [
        { categoryName: "...", categoryId: 1, categoryCode: "..." },
        // ...
    ],
    key: ["categoryId", "categoryCode"]
});

const headerFilterData = {
    store: categoriesStore,
    map: (item) => {
        return {
            text: item.categoryName,
            value: item.categoryId,
            categoryId: item.categoryId,
            categoryCode: item.categoryCode
        }
    }
};

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Column>
                    <HeaderFilter
                        dataSource={headerFilterData}
                    />
                </Column>
            </DataGrid>
        );
    }
}

export default App;

Change the Generated Data Source

To change the generated data source, set the dataSource property to a function. This function accepts an object whose dataSource field contains a DataSource configuration. Define the DataSource's postProcess function in which you can change header filter items.

NOTE

Keep the allowSearch property set to false because searching produces incorrect results when the postProcess function is applied.

In the following code, the postProcess function adds a custom item to the generated data source:

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: function (options) {
                    options.dataSource.postProcess = function (results) {
                        results.push({
                            text: "Weekends",
                            value: [
                                ['OrderDay', "=", 0],
                                    "or",
                                ['OrderDay', "=", 6]
                            ]
                        });
                        return results;
                    }
                }
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >
    <dxi-column>
        <dxo-header-filter
            [dataSource]="customizeHeaderFilterData">
        </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 {
    customizeHeaderFilterData(options) {
        options.dataSource.postProcess = (results) => {
            results.push({
                text: "Weekends",
                value: [
                    ['OrderDay', "=", 0], 
                        "or", 
                    ['OrderDay', "=", 6]
                ]
            });
            return results;
        }
    }
}

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>
            <DxHeaderFilter
                :data-source="customizeHeaderFilterData"
            />
        </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
    },
    methods: {
        customizeHeaderFilterData(options) {
            options.dataSource.postProcess = (results) => {
                results.push({
                    text: 'Weekends',
                    value: [
                        ['OrderDay', '=', 0],
                            'or',
                        ['OrderDay', '=', 6]
                    ]
                });
                return results;
            }
        }
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Column>
                    <HeaderFilter
                        dataSource={this.customizeHeaderFilterData}
                    />
                </Column>
            </DataGrid>
        );
    }

    customizeHeaderFilterData(options) {
        options.dataSource.postProcess = function(results) {
            results.push({
                text: 'Weekends',
                value: [
                    ['OrderDay', '=', 0],
                        'or',
                    ['OrderDay', '=', 6]
                ]
            });
            return results;
        };
    }
}

export default App;

View Demo

Customize Item Appearance

You can use templates to customize the appearance of individual items. In the following code, a template makes the Today item bold:

jQuery

index.js

$(function() {
    const now = new Date();
    const startOfWeek = new Date(
        now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
    );
    const startOfDay = new Date(now.setHours(0,0,0,0));
    const boldFont = (data) => {
        return "<b>" + data.text + "</b>";
    }

    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: [{
                    text: 'Today',
                    value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
                    template: boldFont
                }, {
                    text: 'This week',
                    value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
                }, {
                    text: 'Earlier',
                    value: ['OrderDate', '<', startOfWeek]
                }]
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >
    <dxi-column>
        <dxo-header-filter
            [dataSource]="headerFilterData">
        </dxo-header-filter>
    </dxi-column>
    <div *dxTemplate="let data of 'boldFont'">
        <b>{{data.text}}</b>
    </div>
</dx-data-grid>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    headerFilterData: any;
    constructor() {
        const now = new Date();
        const startOfWeek = new Date(
            now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
        );             
        const startOfDay = new Date(now.setHours(0,0,0,0));

        this.headerFilterData = [{
            text: 'Today',
            value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
            template: 'boldFont'
        }, {
            text: 'This week',
            value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
        }, {
            text: 'Earlier',
            value: ['OrderDate', '<', startOfWeek]
        }];
    }
}

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>
            <DxHeaderFilter
                :data-source="headerFilterData"
            />
        </DxColumn>
        <template #bold-font="{ data }">
            <b>{{data.text}}</b>
        </template>
    </DxDataGrid>
</template>

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

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

const now = new Date();
const startOfWeek = new Date(
    now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
);             
const startOfDay = new Date(now.setHours(0,0,0,0));

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxHeaderFilter
    },
    data() {
        return {
            headerFilterData: [{
                text: 'Today',
                value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
                template: 'bold-font'
            }, {
                text: 'This week',
                value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
            }, {
                text: 'Earlier',
                value: ['OrderDate', '<', startOfWeek]
            }]
        };
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const now = new Date();
const startOfWeek = new Date(
    now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
);
const startOfDay = new Date(now.setHours(0, 0, 0, 0));

const renderBoldText = (data) => <b>{data.text}</b>;

const headerFilterData = [{
    text: 'Today',
    value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
    template: 'boldFont'
}, {
    text: 'This week',
    value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
}, {
    text: 'Earlier',
    value: ['OrderDate', '<', startOfWeek]
}];

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Column>
                    <HeaderFilter
                        dataSource={headerFilterData}
                    />
                </Column>
                 <Template name="boldFont" render={renderBoldText} />
            </DataGrid>
        );
    }
}

export default App;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

Customize Header Filter Data Source

Specify a Custom Data Source

jQuery

Angular

Vue

React

Map Data Source Fields

jQuery

Angular

Vue

React

Change the Generated Data Source

jQuery

Angular

Vue

React

Customize Item Appearance

jQuery

Angular

Vue

React