Customize Header Filter Data Source
This article discusses different ways to customize the headerFilter.dataSource.
Specify a Custom Data Source
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
$(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
<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
<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
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;
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.
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
$(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
<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
<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
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.
In the following code, the postProcess function adds a custom item to the generated data source:
jQuery
$(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
<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
<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
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;
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
$(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
<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
<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
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;