Column Header Filter
The DevExtreme Data Grid includes a column header filter option – with it, users can quickly filter rows against values selected in a pop-up menu. To display the built-in filter menu, users can click the Grid’s header filter icon (displayed within the column header).
Display Header Filter Icons
Assign true to the headerFilter.visible property to display header filter icons for all columns. To hide the icon for a specific column, set the column's allowHeaderFiltering property to false.
Enable Search UI Within Header Filters
The DevExtreme Grid includes a text-based search option. This feature allows users to search for specific values within a header filter. To configure the search panel, define the search property in the global headerFilter object or in a columns.headerFilter object.
The search panel's default behavior looks for values only within the same data field. You can include additional fields in the search. Specify the search.searchExpr property for this purpose. For example, this demo allows you to enter a state name in the City column's header filter. You can then see a list of all cities within the specified state and select city names that you want to use as a filter.
To apply a comparison operation used to search header filter values, specify the search.mode property.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React from 'react';
import {
DataGrid, HeaderFilter, Search, Column,
} from 'devextreme-react/data-grid';
import { employees } from './data.ts';
const searchFields = ['City', 'State'];
const searchEditorOptions = { placeholder: 'Search city or state' };
const App = () => (
<DataGrid
id="employees"
dataSource={employees}
columnAutoWidth={true}
showRowLines={true}
showBorders={true}
keyExpr="ID"
>
<HeaderFilter visible={true} />
<Column dataField="FirstName" />
<Column dataField="LastName" />
<Column dataField="Position">
<HeaderFilter allowSelectAll={false}>
<Search enabled={true} />
</HeaderFilter>
</Column>
<Column dataField="City">
<HeaderFilter>
<Search
enabled={true}
searchExpr={searchFields}
editorOptions={searchEditorOptions} />
</HeaderFilter>
</Column>
<Column dataField="State" />
<Column dataField="HomePhone" />
<Column dataField="HireDate" dataType="date" />
</DataGrid>
);
export default App;
import React from 'react';
import {
DataGrid, HeaderFilter, Search, Column,
} from 'devextreme-react/data-grid';
import { employees } from './data.js';
const searchFields = ['City', 'State'];
const searchEditorOptions = { placeholder: 'Search city or state' };
const App = () => (
<DataGrid
id="employees"
dataSource={employees}
columnAutoWidth={true}
showRowLines={true}
showBorders={true}
keyExpr="ID"
>
<HeaderFilter visible={true} />
<Column dataField="FirstName" />
<Column dataField="LastName" />
<Column dataField="Position">
<HeaderFilter allowSelectAll={false}>
<Search enabled={true} />
</HeaderFilter>
</Column>
<Column dataField="City">
<HeaderFilter>
<Search
enabled={true}
searchExpr={searchFields}
editorOptions={searchEditorOptions}
/>
</HeaderFilter>
</Column>
<Column dataField="State" />
<Column dataField="HomePhone" />
<Column
dataField="HireDate"
dataType="date"
/>
</DataGrid>
);
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const employees = [{
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
BirthDate: '1964/03/16',
HireDate: '1995/01/15',
Title: 'Mr.',
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'California',
Zipcode: 90013,
Email: 'jheart@dx-email.com',
Skype: 'jheartDXskype',
HomePhone: '(213) 555-9208',
DepartmentID: 6,
MobilePhone: '(213) 555-9392',
}, {
ID: 2,
FirstName: 'Olivia',
LastName: 'Peyton',
Position: 'Sales Assistant',
BirthDate: '1981/06/03',
HireDate: '2012/05/14',
Title: 'Mrs.',
Address: '807 W Paseo Del Mar',
City: 'Los Angeles',
State: 'California',
Zipcode: 90036,
Email: 'oliviap@dx-email.com',
Skype: 'oliviapDXskype',
HomePhone: '(310) 555-2728',
DepartmentID: 5,
MobilePhone: '(818) 555-2387',
}, {
ID: 3,
FirstName: 'Robert',
LastName: 'Reagan',
Position: 'CMO',
BirthDate: '1974/09/07',
HireDate: '2002/11/08',
Title: 'Mr.',
Address: '4 Westmoreland Pl.',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 91103,
Email: 'robertr@dx-email.com',
Skype: 'robertrDXskype',
HomePhone: '(818) 555-2438',
DepartmentID: 6,
MobilePhone: '(818) 555-2387',
}, {
ID: 4,
FirstName: 'Greta',
LastName: 'Sims',
Position: 'HR Manager',
BirthDate: '1977/11/22',
HireDate: '1998/04/23',
Title: 'Ms.',
Address: '1700 S Grandview Dr.',
State: 'Georgia',
City: 'Atlanta',
Zipcode: 91803,
Email: 'gretas@dx-email.com',
Skype: 'gretasDXskype',
HomePhone: '(818) 555-0976',
DepartmentID: 5,
MobilePhone: '(818) 555-6546',
}, {
ID: 5,
FirstName: 'Brett',
LastName: 'Wade',
Position: 'IT Manager',
BirthDate: '1968/12/01',
HireDate: '2009/03/06',
Title: 'Mr.',
Address: '1120 Old Mill Rd.',
State: 'Idaho',
City: 'Boise',
Zipcode: 91108,
Email: 'brettw@dx-email.com',
Skype: 'brettwDXskype',
HomePhone: '(626) 555-5985',
DepartmentID: 7,
MobilePhone: '(626) 555-0358',
}, {
ID: 6,
FirstName: 'Sandra',
LastName: 'Johnson',
Position: 'Controller',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Title: 'Mrs.',
Address: '4600 N Virginia Rd.',
State: 'Utah',
City: 'Beaver',
Zipcode: 90807,
Email: 'sandraj@dx-email.com',
Skype: 'sandrajDXskype',
HomePhone: '(562) 555-8272',
DepartmentID: 5,
MobilePhone: '(562) 555-2082',
}, {
ID: 7,
FirstName: 'Kevin',
LastName: 'Carter',
Position: 'Shipping Manager',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Title: 'Mr.',
Address: '424 N Main St.',
State: 'California',
City: 'San Diego',
Zipcode: 90012,
Email: 'kevinc@dx-email.com',
Skype: 'kevincDXskype',
HomePhone: '(213) 555-8038',
DepartmentID: 3,
MobilePhone: '(213) 555-2840',
}, {
ID: 8,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Position: 'HR Assistant',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Title: 'Ms.',
Address: '2211 Bonita Dr.',
City: 'Little Rock',
State: 'Arkansas',
Zipcode: 90265,
Email: 'cindys@dx-email.com',
Skype: 'cindysDXskype',
HomePhone: '(818) 555-6808',
DepartmentID: 4,
MobilePhone: '(818) 555-6655',
}, {
ID: 9,
FirstName: 'Kent',
LastName: 'Samuelson',
Position: 'Ombudsman',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Title: 'Dr.',
Address: '12100 Mora Dr',
City: 'St. Louis',
State: 'Missouri',
Zipcode: 90272,
Email: 'kents@dx-email.com',
Skype: 'kentsDXskype',
HomePhone: '(562) 555-1328',
DepartmentID: 26,
MobilePhone: '(562) 555-9282',
}, {
ID: 10,
FirstName: 'Taylor',
LastName: 'Riley',
Position: 'Network Admin',
BirthDate: '1982/08/14',
HireDate: '2012/04/14',
Title: 'Mr.',
Address: '7776 Torreyson Dr',
City: 'San Jose',
State: 'California',
Zipcode: 90012,
Email: 'taylorr@dx-email.com',
Skype: 'taylorrDXskype',
HomePhone: '(310) 555-9712',
DepartmentID: 5,
MobilePhone: '(310) 555-7276',
}];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.2.5/cjs',
'devextreme-react': 'npm:devextreme-react@23.2.5/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: '',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const employees = [
{
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
BirthDate: '1964/03/16',
HireDate: '1995/01/15',
Title: 'Mr.',
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'California',
Zipcode: 90013,
Email: 'jheart@dx-email.com',
Skype: 'jheartDXskype',
HomePhone: '(213) 555-9208',
DepartmentID: 6,
MobilePhone: '(213) 555-9392',
},
{
ID: 2,
FirstName: 'Olivia',
LastName: 'Peyton',
Position: 'Sales Assistant',
BirthDate: '1981/06/03',
HireDate: '2012/05/14',
Title: 'Mrs.',
Address: '807 W Paseo Del Mar',
City: 'Los Angeles',
State: 'California',
Zipcode: 90036,
Email: 'oliviap@dx-email.com',
Skype: 'oliviapDXskype',
HomePhone: '(310) 555-2728',
DepartmentID: 5,
MobilePhone: '(818) 555-2387',
},
{
ID: 3,
FirstName: 'Robert',
LastName: 'Reagan',
Position: 'CMO',
BirthDate: '1974/09/07',
HireDate: '2002/11/08',
Title: 'Mr.',
Address: '4 Westmoreland Pl.',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 91103,
Email: 'robertr@dx-email.com',
Skype: 'robertrDXskype',
HomePhone: '(818) 555-2438',
DepartmentID: 6,
MobilePhone: '(818) 555-2387',
},
{
ID: 4,
FirstName: 'Greta',
LastName: 'Sims',
Position: 'HR Manager',
BirthDate: '1977/11/22',
HireDate: '1998/04/23',
Title: 'Ms.',
Address: '1700 S Grandview Dr.',
State: 'Georgia',
City: 'Atlanta',
Zipcode: 91803,
Email: 'gretas@dx-email.com',
Skype: 'gretasDXskype',
HomePhone: '(818) 555-0976',
DepartmentID: 5,
MobilePhone: '(818) 555-6546',
},
{
ID: 5,
FirstName: 'Brett',
LastName: 'Wade',
Position: 'IT Manager',
BirthDate: '1968/12/01',
HireDate: '2009/03/06',
Title: 'Mr.',
Address: '1120 Old Mill Rd.',
State: 'Idaho',
City: 'Boise',
Zipcode: 91108,
Email: 'brettw@dx-email.com',
Skype: 'brettwDXskype',
HomePhone: '(626) 555-5985',
DepartmentID: 7,
MobilePhone: '(626) 555-0358',
},
{
ID: 6,
FirstName: 'Sandra',
LastName: 'Johnson',
Position: 'Controller',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Title: 'Mrs.',
Address: '4600 N Virginia Rd.',
State: 'Utah',
City: 'Beaver',
Zipcode: 90807,
Email: 'sandraj@dx-email.com',
Skype: 'sandrajDXskype',
HomePhone: '(562) 555-8272',
DepartmentID: 5,
MobilePhone: '(562) 555-2082',
},
{
ID: 7,
FirstName: 'Kevin',
LastName: 'Carter',
Position: 'Shipping Manager',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Title: 'Mr.',
Address: '424 N Main St.',
State: 'California',
City: 'San Diego',
Zipcode: 90012,
Email: 'kevinc@dx-email.com',
Skype: 'kevincDXskype',
HomePhone: '(213) 555-8038',
DepartmentID: 3,
MobilePhone: '(213) 555-2840',
},
{
ID: 8,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Position: 'HR Assistant',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Title: 'Ms.',
Address: '2211 Bonita Dr.',
City: 'Little Rock',
State: 'Arkansas',
Zipcode: 90265,
Email: 'cindys@dx-email.com',
Skype: 'cindysDXskype',
HomePhone: '(818) 555-6808',
DepartmentID: 4,
MobilePhone: '(818) 555-6655',
},
{
ID: 9,
FirstName: 'Kent',
LastName: 'Samuelson',
Position: 'Ombudsman',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Title: 'Dr.',
Address: '12100 Mora Dr',
City: 'St. Louis',
State: 'Missouri',
Zipcode: 90272,
Email: 'kents@dx-email.com',
Skype: 'kentsDXskype',
HomePhone: '(562) 555-1328',
DepartmentID: 26,
MobilePhone: '(562) 555-9282',
},
{
ID: 10,
FirstName: 'Taylor',
LastName: 'Riley',
Position: 'Network Admin',
BirthDate: '1982/08/14',
HireDate: '2012/04/14',
Title: 'Mr.',
Address: '7776 Torreyson Dr',
City: 'San Jose',
State: 'California',
Zipcode: 90012,
Email: 'taylorr@dx-email.com',
Skype: 'taylorrDXskype',
HomePhone: '(310) 555-9712',
DepartmentID: 5,
MobilePhone: '(310) 555-7276',
},
];
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#employees {
max-height: 440px;
}