React Tree List - Using Filter Row

The filter row allows users to enter a value for each column and filter grid data by those values. To display the filter row, set the filterRow.visible property to true. If you need to disable a filter row cell for a specific column, set the column's allowFiltering property to false.

Depending on a column's dataType, its filter row cell contains different editors:

dataType	Editor
"string", "number", "object"	Text box
"boolean"	Drop-down list
"date"	Date picker
"datetime"	Date and time picker

Was this demo helpful?

Thank you!

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!

TS JS

Backend API

​x
 
import React from 'react';
import {  TreeList, FilterRow, Selection, Column,} from 'devextreme-react/tree-list';import { employees } from './data.ts';​const expandedRowKeys = [1];​const App = () => (  <TreeList    id="employees"    dataSource={employees}    columnAutoWidth={true}    showRowLines={true}    showBorders={true}    defaultExpandedRowKeys={expandedRowKeys}    keyExpr="ID"    parentIdExpr="Head_ID"  >    <FilterRow visible={true} />    <Selection mode="single" />    <Column dataField="Full_Name" />    <Column dataField="Title" caption="Position" />    <Column dataField="City" />    <Column dataField="State" />    <Column dataField="Mobile_Phone" />    <Column dataField="Hire_Date" dataType="date" />  </TreeList>);​export default App;​

xxxxxxxxxx
 
import React from 'react';
import {  TreeList, FilterRow, Selection, Column,} from 'devextreme-react/tree-list';import { employees } from './data.js';​const expandedRowKeys = [1];const App = () => (  <TreeList    id="employees"    dataSource={employees}    columnAutoWidth={true}    showRowLines={true}    showBorders={true}    defaultExpandedRowKeys={expandedRowKeys}    keyExpr="ID"    parentIdExpr="Head_ID"  >    <FilterRow visible={true} />    <Selection mode="single" />    <Column dataField="Full_Name" />    <Column      dataField="Title"      caption="Position"    />    <Column dataField="City" />    <Column dataField="State" />    <Column dataField="Mobile_Phone" />    <Column      dataField="Hire_Date"      dataType="date"    />  </TreeList>);export default App;​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
export const employees = [{
  ID: 1,  Head_ID: 0,  Full_Name: 'John Heart',  Prefix: 'Mr.',  Title: 'CEO',  City: 'Los Angeles',  State: 'California',  Email: 'jheart@dx-email.com',  Skype: 'jheart_DX_skype',  Mobile_Phone: '(213) 555-9392',  Birth_Date: '1964-03-16',  Hire_Date: '1995-01-15',}, {  ID: 2,  Head_ID: 1,  Full_Name: 'Samantha Bright',  Prefix: 'Dr.',  Title: 'COO',  City: 'Los Angeles',  State: 'California',  Email: 'samanthab@dx-email.com',  Skype: 'samanthab_DX_skype',  Mobile_Phone: '(213) 555-2858',  Birth_Date: '1966-05-02',  Hire_Date: '2004-05-24',}, {  ID: 3,  Head_ID: 1,  Full_Name: 'Arthur Miller',  Prefix: 'Mr.',  Title: 'CTO',  City: 'Denver',  State: 'Colorado',  Email: 'arthurm@dx-email.com',  Skype: 'arthurm_DX_skype',  Mobile_Phone: '(310) 555-8583',  Birth_Date: '1972-07-11',  Hire_Date: '2007-12-18',}, {  ID: 4,  Head_ID: 1,  Full_Name: 'Robert Reagan',  Prefix: 'Mr.',  Title: 'CMO',  City: 'Bentonville',  State: 'Arkansas',  Email: 'robertr@dx-email.com',  Skype: 'robertr_DX_skype',  Mobile_Phone: '(818) 555-2387',  Birth_Date: '1974-09-07',  Hire_Date: '2002-11-08',}, {  ID: 5,  Head_ID: 1,  Full_Name: 'Greta Sims',  Prefix: 'Ms.',  Title: 'HR Manager',  City: 'Atlanta',  State: 'Georgia',  Email: 'gretas@dx-email.com',  Skype: 'gretas_DX_skype',  Mobile_Phone: '(818) 555-6546',  Birth_Date: '1977-11-22',  Hire_Date: '1998-04-23',}, {  ID: 6,  Head_ID: 3,  Full_Name: 'Brett Wade',  Prefix: 'Mr.',  Title: 'IT Manager',  City: 'Reno',  State: 'Nevada',  Email: 'brettw@dx-email.com',  Skype: 'brettw_DX_skype',  Mobile_Phone: '(626) 555-0358',  Birth_Date: '1968-12-01',  Hire_Date: '2009-03-06',}, {  ID: 7,  Head_ID: 5,  Full_Name: 'Sandra Johnson',  Prefix: 'Mrs.',  Title: 'Controller',  City: 'Beaver',  State: 'Utah',  Email: 'sandraj@dx-email.com',  Skype: 'sandraj_DX_skype',  Mobile_Phone: '(562) 555-2082',  Birth_Date: '1974-11-15',  Hire_Date: '2005-05-11',}, {  ID: 8,  Head_ID: 4,  Full_Name: 'Ed Holmes',  Prefix: 'Dr.',  Title: 'Sales Manager',  City: 'Malibu',  State: 'California',  Email: 'edwardh@dx-email.com',  Skype: 'edwardh_DX_skype',  Mobile_Phone: '(310) 555-1288',  Birth_Date: '1973-07-14',  Hire_Date: '2005-06-19',}, {  ID: 9,  Head_ID: 3,  Full_Name: 'Barb Banks',  Prefix: 'Mrs.',  Title: 'Support Manager',  City: 'Phoenix',  State: 'Arizona',  Email: 'barbarab@dx-email.com',  Skype: 'barbarab_DX_skype',  Mobile_Phone: '(310) 555-3355',  Birth_Date: '1979-04-14',  Hire_Date: '2002-08-07',}, {  ID: 10,  Head_ID: 2,  Full_Name: 'Kevin Carter',  Prefix: 'Mr.',  Title: 'Shipping Manager',  City: 'San Diego',  State: 'California',  Email: 'kevinc@dx-email.com',  Skype: 'kevinc_DX_skype',  Mobile_Phone: '(213) 555-2840',  Birth_Date: '1978-01-09',  Hire_Date: '2009-08-11',}, {  ID: 11,  Head_ID: 5,  Full_Name: 'Cindy Stanwick',  Prefix: 'Ms.',  Title: 'HR Assistant',  City: 'Little Rock',  State: 'Arkansas',  Email: 'cindys@dx-email.com',  Skype: 'cindys_DX_skype',  Mobile_Phone: '(818) 555-6655',  Birth_Date: '1985-06-05',  Hire_Date: '2008-03-24',}, {  ID: 12,  Head_ID: 8,  Full_Name: 'Sammy Hill',  Prefix: 'Mr.',  Title: 'Sales Assistant',  City: 'Pasadena',  State: 'California',  Email: 'sammyh@dx-email.com',  Skype: 'sammyh_DX_skype',  Mobile_Phone: '(626) 555-7292',  Birth_Date: '1984-02-17',  Hire_Date: '2012-02-01',}, {  ID: 13,  Head_ID: 10,  Full_Name: 'Davey Jones',  Prefix: 'Mr.',  Title: 'Shipping Assistant',  City: 'Pasadena',  State: 'California',  Email: 'davidj@dx-email.com',  Skype: 'davidj_DX_skype',  Mobile_Phone: '(626) 555-0281',  Birth_Date: '1983-03-06',  Hire_Date: '2011-04-24',}, {  ID: 14,  Head_ID: 10,  Full_Name: 'Victor Norris',  Prefix: 'Mr.',  Title: 'Shipping Assistant',  City: 'Little Rock',  State: 'Arkansas',  Email: 'victorn@dx-email.com',  Skype: 'victorn_DX_skype',  Mobile_Phone: '(213) 555-9278',  Birth_Date: '1986-07-23',  Hire_Date: '2012-07-23',}, {  ID: 15,  Head_ID: 10,  Full_Name: 'Mary Stern',  Prefix: 'Ms.',  Title: 'Shipping Assistant',  City: 'Beaver',  State: 'Utah',  Email: 'marys@dx-email.com',  Skype: 'marys_DX_skype',  Mobile_Phone: '(818) 555-7857',  Birth_Date: '1982-04-08',  Hire_Date: '2012-08-12',}, {  ID: 16,  Head_ID: 10,  Full_Name: 'Robin Cosworth',  Prefix: 'Mrs.',  Title: 'Shipping Assistant',  City: 'Los Angeles',  State: 'California',  Email: 'robinc@dx-email.com',  Skype: 'robinc_DX_skype',  Mobile_Phone: '(818) 555-0942',  Birth_Date: '1981-06-12',  Hire_Date: '2012-09-01',}, {  ID: 17,  Head_ID: 9,  Full_Name: 'Kelly Rodriguez',  Prefix: 'Ms.',  Title: 'Support Assistant',  City: 'Boise',  State: 'Idaho',  Email: 'kellyr@dx-email.com',  Skype: 'kellyr_DX_skype',  Mobile_Phone: '(818) 555-9248',  Birth_Date: '1988-05-11',  Hire_Date: '2012-10-13',}, {  ID: 18,  Head_ID: 9,  Full_Name: 'James Anderson',  Prefix: 'Mr.',  Title: 'Support Assistant',  City: 'Atlanta',  State: 'Georgia',  Email: 'jamesa@dx-email.com',  Skype: 'jamesa_DX_skype',  Mobile_Phone: '(323) 555-4702',  Birth_Date: '1987-01-29',  Hire_Date: '2012-10-18',}, {  ID: 19,  Head_ID: 9,  Full_Name: 'Antony Remmen',  Prefix: 'Mr.',  Title: 'Support Assistant',  City: 'Boise',  State: 'Idaho',  Email: 'anthonyr@dx-email.com',  Skype: 'anthonyr_DX_skype',  Mobile_Phone: '(310) 555-6625',  Birth_Date: '1986-02-19',  Hire_Date: '2013-01-19',}, {  ID: 20,  Head_ID: 8,  Full_Name: 'Olivia Peyton',  Prefix: 'Mrs.',  Title: 'Sales Assistant',  City: 'Atlanta',  State: 'Georgia',  Email: 'oliviap@dx-email.com',  Skype: 'oliviap_DX_skype',  Mobile_Phone: '(310) 555-2728',  Birth_Date: '1981-06-03',  Hire_Date: '2012-05-14',}, {  ID: 21,  Head_ID: 6,  Full_Name: 'Taylor Riley',  Prefix: 'Mr.',  Title: 'Network Admin',  City: 'San Jose',  State: 'California',  Email: 'taylorr@dx-email.com',  Skype: 'taylorr_DX_skype',  Mobile_Phone: '(310) 555-7276',  Birth_Date: '1982-08-14',  Hire_Date: '2012-04-14',}, {  ID: 22,  Head_ID: 6,  Full_Name: 'Amelia Harper',  Prefix: 'Mrs.',  Title: 'Network Admin',  City: 'Los Angeles',  State: 'California',  Email: 'ameliah@dx-email.com',  Skype: 'ameliah_DX_skype',  Mobile_Phone: '(213) 555-4276',  Birth_Date: '1983-11-19',  Hire_Date: '2011-02-10',}, {  ID: 23,  Head_ID: 6,  Full_Name: 'Wally Hobbs',  Prefix: 'Mr.',  Title: 'Programmer',  City: 'Chatsworth',  State: 'California',  Email: 'wallyh@dx-email.com',  Skype: 'wallyh_DX_skype',  Mobile_Phone: '(818) 555-8872',  Birth_Date: '1984-12-24',  Hire_Date: '2011-02-17',}, {  ID: 24,  Head_ID: 6,  Full_Name: 'Brad Jameson',  Prefix: 'Mr.',  Title: 'Programmer',  City: 'San Fernando',  State: 'California',  Email: 'bradleyj@dx-email.com',  Skype: 'bradleyj_DX_skype',  Mobile_Phone: '(818) 555-4646',  Birth_Date: '1988-10-12',  Hire_Date: '2011-03-02',}, {  ID: 25,  Head_ID: 6,  Full_Name: 'Karen Goodson',  Prefix: 'Miss',  Title: 'Programmer',  City: 'South Pasadena',  State: 'California',  Email: 'kareng@dx-email.com',  Skype: 'kareng_DX_skype',  Mobile_Phone: '(626) 555-0908',  Birth_Date: '1987-04-26',  Hire_Date: '2011-03-14',}, {  ID: 26,  Head_ID: 5,  Full_Name: 'Marcus Orbison',  Prefix: 'Mr.',  Title: 'Travel Coordinator',  City: 'Los Angeles',  State: 'California',  Email: 'marcuso@dx-email.com',  Skype: 'marcuso_DX_skype',  Mobile_Phone: '(213) 555-7098',  Birth_Date: '1982-03-02',  Hire_Date: '2005-05-19',}, {  ID: 27,  Head_ID: 5,  Full_Name: 'Sandy Bright',  Prefix: 'Ms.',  Title: 'Benefits Coordinator',  City: 'Denver',  State: 'Colorado',  Email: 'sandrab@dx-email.com',  Skype: 'sandrab_DX_skype',  Mobile_Phone: '(818) 555-0524',  Birth_Date: '1983-09-11',  Hire_Date: '2005-06-04',}, {  ID: 28,  Head_ID: 6,  Full_Name: 'Morgan Kennedy',  Prefix: 'Mrs.',  Title: 'Graphic Designer',  City: 'San Fernando Valley',  State: 'California',  Email: 'morgank@dx-email.com',  Skype: 'morgank_DX_skype',  Mobile_Phone: '(818) 555-8238',  Birth_Date: '1984-07-17',  Hire_Date: '2012-01-11',}, {  ID: 29,  Head_ID: 28,  Full_Name: 'Violet Bailey',  Prefix: 'Ms.',  Title: 'Jr Graphic Designer',  City: 'La Canada',  State: 'California',  Email: 'violetb@dx-email.com',  Skype: 'violetb_DX_skype',  Mobile_Phone: '(818) 555-2478',  Birth_Date: '1985-06-10',  Hire_Date: '2012-01-19',}, {  ID: 30,  Head_ID: 5,  Full_Name: 'Ken Samuelson',  Prefix: 'Dr.',  Title: 'Ombudsman',  City: 'St. Louis',  State: 'Missouri',  Email: 'kents@dx-email.com',  Skype: 'kents_DX_skype',  Mobile_Phone: '(562) 555-9282',  Birth_Date: '1972-09-11',  Hire_Date: '2009-04-22',}];​​

xxxxxxxxxx
 
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,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.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/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/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/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.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    '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);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
export const employees = [
  {    ID: 1,    Head_ID: 0,    Full_Name: 'John Heart',    Prefix: 'Mr.',    Title: 'CEO',    City: 'Los Angeles',    State: 'California',    Email: 'jheart@dx-email.com',    Skype: 'jheart_DX_skype',    Mobile_Phone: '(213) 555-9392',    Birth_Date: '1964-03-16',    Hire_Date: '1995-01-15',  },  {    ID: 2,    Head_ID: 1,    Full_Name: 'Samantha Bright',    Prefix: 'Dr.',    Title: 'COO',    City: 'Los Angeles',    State: 'California',    Email: 'samanthab@dx-email.com',    Skype: 'samanthab_DX_skype',    Mobile_Phone: '(213) 555-2858',    Birth_Date: '1966-05-02',    Hire_Date: '2004-05-24',  },  {    ID: 3,    Head_ID: 1,    Full_Name: 'Arthur Miller',    Prefix: 'Mr.',    Title: 'CTO',    City: 'Denver',    State: 'Colorado',    Email: 'arthurm@dx-email.com',    Skype: 'arthurm_DX_skype',    Mobile_Phone: '(310) 555-8583',    Birth_Date: '1972-07-11',    Hire_Date: '2007-12-18',  },  {    ID: 4,    Head_ID: 1,    Full_Name: 'Robert Reagan',    Prefix: 'Mr.',    Title: 'CMO',    City: 'Bentonville',    State: 'Arkansas',    Email: 'robertr@dx-email.com',    Skype: 'robertr_DX_skype',    Mobile_Phone: '(818) 555-2387',    Birth_Date: '1974-09-07',    Hire_Date: '2002-11-08',  },  {    ID: 5,    Head_ID: 1,    Full_Name: 'Greta Sims',    Prefix: 'Ms.',    Title: 'HR Manager',    City: 'Atlanta',    State: 'Georgia',    Email: 'gretas@dx-email.com',    Skype: 'gretas_DX_skype',    Mobile_Phone: '(818) 555-6546',    Birth_Date: '1977-11-22',    Hire_Date: '1998-04-23',  },  {    ID: 6,    Head_ID: 3,    Full_Name: 'Brett Wade',    Prefix: 'Mr.',    Title: 'IT Manager',    City: 'Reno',    State: 'Nevada',    Email: 'brettw@dx-email.com',    Skype: 'brettw_DX_skype',    Mobile_Phone: '(626) 555-0358',    Birth_Date: '1968-12-01',    Hire_Date: '2009-03-06',  },  {    ID: 7,    Head_ID: 5,    Full_Name: 'Sandra Johnson',    Prefix: 'Mrs.',    Title: 'Controller',    City: 'Beaver',    State: 'Utah',    Email: 'sandraj@dx-email.com',    Skype: 'sandraj_DX_skype',    Mobile_Phone: '(562) 555-2082',    Birth_Date: '1974-11-15',    Hire_Date: '2005-05-11',  },  {    ID: 8,    Head_ID: 4,    Full_Name: 'Ed Holmes',    Prefix: 'Dr.',    Title: 'Sales Manager',    City: 'Malibu',    State: 'California',    Email: 'edwardh@dx-email.com',    Skype: 'edwardh_DX_skype',    Mobile_Phone: '(310) 555-1288',    Birth_Date: '1973-07-14',    Hire_Date: '2005-06-19',  },  {    ID: 9,    Head_ID: 3,    Full_Name: 'Barb Banks',    Prefix: 'Mrs.',    Title: 'Support Manager',    City: 'Phoenix',    State: 'Arizona',    Email: 'barbarab@dx-email.com',    Skype: 'barbarab_DX_skype',    Mobile_Phone: '(310) 555-3355',    Birth_Date: '1979-04-14',    Hire_Date: '2002-08-07',  },  {    ID: 10,    Head_ID: 2,    Full_Name: 'Kevin Carter',    Prefix: 'Mr.',    Title: 'Shipping Manager',    City: 'San Diego',    State: 'California',    Email: 'kevinc@dx-email.com',    Skype: 'kevinc_DX_skype',    Mobile_Phone: '(213) 555-2840',    Birth_Date: '1978-01-09',    Hire_Date: '2009-08-11',  },  {    ID: 11,    Head_ID: 5,    Full_Name: 'Cindy Stanwick',    Prefix: 'Ms.',    Title: 'HR Assistant',    City: 'Little Rock',    State: 'Arkansas',    Email: 'cindys@dx-email.com',    Skype: 'cindys_DX_skype',    Mobile_Phone: '(818) 555-6655',    Birth_Date: '1985-06-05',    Hire_Date: '2008-03-24',  },  {    ID: 12,    Head_ID: 8,    Full_Name: 'Sammy Hill',    Prefix: 'Mr.',    Title: 'Sales Assistant',    City: 'Pasadena',    State: 'California',    Email: 'sammyh@dx-email.com',    Skype: 'sammyh_DX_skype',    Mobile_Phone: '(626) 555-7292',    Birth_Date: '1984-02-17',    Hire_Date: '2012-02-01',  },  {    ID: 13,    Head_ID: 10,    Full_Name: 'Davey Jones',    Prefix: 'Mr.',    Title: 'Shipping Assistant',    City: 'Pasadena',    State: 'California',    Email: 'davidj@dx-email.com',    Skype: 'davidj_DX_skype',    Mobile_Phone: '(626) 555-0281',    Birth_Date: '1983-03-06',    Hire_Date: '2011-04-24',  },  {    ID: 14,    Head_ID: 10,    Full_Name: 'Victor Norris',    Prefix: 'Mr.',    Title: 'Shipping Assistant',    City: 'Little Rock',    State: 'Arkansas',    Email: 'victorn@dx-email.com',    Skype: 'victorn_DX_skype',    Mobile_Phone: '(213) 555-9278',    Birth_Date: '1986-07-23',    Hire_Date: '2012-07-23',  },  {    ID: 15,    Head_ID: 10,    Full_Name: 'Mary Stern',    Prefix: 'Ms.',    Title: 'Shipping Assistant',    City: 'Beaver',    State: 'Utah',    Email: 'marys@dx-email.com',    Skype: 'marys_DX_skype',    Mobile_Phone: '(818) 555-7857',    Birth_Date: '1982-04-08',    Hire_Date: '2012-08-12',  },  {    ID: 16,    Head_ID: 10,    Full_Name: 'Robin Cosworth',    Prefix: 'Mrs.',    Title: 'Shipping Assistant',    City: 'Los Angeles',    State: 'California',    Email: 'robinc@dx-email.com',    Skype: 'robinc_DX_skype',    Mobile_Phone: '(818) 555-0942',    Birth_Date: '1981-06-12',    Hire_Date: '2012-09-01',  },  {    ID: 17,    Head_ID: 9,    Full_Name: 'Kelly Rodriguez',    Prefix: 'Ms.',    Title: 'Support Assistant',    City: 'Boise',    State: 'Idaho',    Email: 'kellyr@dx-email.com',    Skype: 'kellyr_DX_skype',    Mobile_Phone: '(818) 555-9248',    Birth_Date: '1988-05-11',    Hire_Date: '2012-10-13',  },  {    ID: 18,    Head_ID: 9,    Full_Name: 'James Anderson',    Prefix: 'Mr.',    Title: 'Support Assistant',    City: 'Atlanta',    State: 'Georgia',    Email: 'jamesa@dx-email.com',    Skype: 'jamesa_DX_skype',    Mobile_Phone: '(323) 555-4702',    Birth_Date: '1987-01-29',    Hire_Date: '2012-10-18',  },  {    ID: 19,    Head_ID: 9,    Full_Name: 'Antony Remmen',    Prefix: 'Mr.',    Title: 'Support Assistant',    City: 'Boise',    State: 'Idaho',    Email: 'anthonyr@dx-email.com',    Skype: 'anthonyr_DX_skype',    Mobile_Phone: '(310) 555-6625',    Birth_Date: '1986-02-19',    Hire_Date: '2013-01-19',  },  {    ID: 20,    Head_ID: 8,    Full_Name: 'Olivia Peyton',    Prefix: 'Mrs.',    Title: 'Sales Assistant',    City: 'Atlanta',    State: 'Georgia',    Email: 'oliviap@dx-email.com',    Skype: 'oliviap_DX_skype',    Mobile_Phone: '(310) 555-2728',    Birth_Date: '1981-06-03',    Hire_Date: '2012-05-14',  },  {    ID: 21,    Head_ID: 6,    Full_Name: 'Taylor Riley',    Prefix: 'Mr.',    Title: 'Network Admin',    City: 'San Jose',    State: 'California',    Email: 'taylorr@dx-email.com',    Skype: 'taylorr_DX_skype',    Mobile_Phone: '(310) 555-7276',    Birth_Date: '1982-08-14',    Hire_Date: '2012-04-14',  },  {    ID: 22,    Head_ID: 6,    Full_Name: 'Amelia Harper',    Prefix: 'Mrs.',    Title: 'Network Admin',    City: 'Los Angeles',    State: 'California',    Email: 'ameliah@dx-email.com',    Skype: 'ameliah_DX_skype',    Mobile_Phone: '(213) 555-4276',    Birth_Date: '1983-11-19',    Hire_Date: '2011-02-10',  },  {    ID: 23,    Head_ID: 6,    Full_Name: 'Wally Hobbs',    Prefix: 'Mr.',    Title: 'Programmer',    City: 'Chatsworth',    State: 'California',    Email: 'wallyh@dx-email.com',    Skype: 'wallyh_DX_skype',    Mobile_Phone: '(818) 555-8872',    Birth_Date: '1984-12-24',    Hire_Date: '2011-02-17',  },  {    ID: 24,    Head_ID: 6,    Full_Name: 'Brad Jameson',    Prefix: 'Mr.',    Title: 'Programmer',    City: 'San Fernando',    State: 'California',    Email: 'bradleyj@dx-email.com',    Skype: 'bradleyj_DX_skype',    Mobile_Phone: '(818) 555-4646',    Birth_Date: '1988-10-12',    Hire_Date: '2011-03-02',  },  {    ID: 25,    Head_ID: 6,    Full_Name: 'Karen Goodson',    Prefix: 'Miss',    Title: 'Programmer',    City: 'South Pasadena',    State: 'California',    Email: 'kareng@dx-email.com',    Skype: 'kareng_DX_skype',    Mobile_Phone: '(626) 555-0908',    Birth_Date: '1987-04-26',    Hire_Date: '2011-03-14',  },  {    ID: 26,    Head_ID: 5,    Full_Name: 'Marcus Orbison',    Prefix: 'Mr.',    Title: 'Travel Coordinator',    City: 'Los Angeles',    State: 'California',    Email: 'marcuso@dx-email.com',    Skype: 'marcuso_DX_skype',    Mobile_Phone: '(213) 555-7098',    Birth_Date: '1982-03-02',    Hire_Date: '2005-05-19',  },  {    ID: 27,    Head_ID: 5,    Full_Name: 'Sandy Bright',    Prefix: 'Ms.',    Title: 'Benefits Coordinator',    City: 'Denver',    State: 'Colorado',    Email: 'sandrab@dx-email.com',    Skype: 'sandrab_DX_skype',    Mobile_Phone: '(818) 555-0524',    Birth_Date: '1983-09-11',    Hire_Date: '2005-06-04',  },  {    ID: 28,    Head_ID: 6,    Full_Name: 'Morgan Kennedy',    Prefix: 'Mrs.',    Title: 'Graphic Designer',    City: 'San Fernando Valley',    State: 'California',    Email: 'morgank@dx-email.com',    Skype: 'morgank_DX_skype',    Mobile_Phone: '(818) 555-8238',    Birth_Date: '1984-07-17',    Hire_Date: '2012-01-11',  },  {    ID: 29,    Head_ID: 28,    Full_Name: 'Violet Bailey',    Prefix: 'Ms.',    Title: 'Jr Graphic Designer',    City: 'La Canada',    State: 'California',    Email: 'violetb@dx-email.com',    Skype: 'violetb_DX_skype',    Mobile_Phone: '(818) 555-2478',    Birth_Date: '1985-06-10',    Hire_Date: '2012-01-19',  },  {    ID: 30,    Head_ID: 5,    Full_Name: 'Ken Samuelson',    Prefix: 'Dr.',    Title: 'Ombudsman',    City: 'St. Louis',    State: 'Missouri',    Email: 'kents@dx-email.com',    Skype: 'kents_DX_skype',    Mobile_Phone: '(562) 555-9282',    Birth_Date: '1972-09-11',    Hire_Date: '2009-04-22',  },];​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx
 
#employees {
  max-height: 440px;}​

In this demo, the Hire Date column's filter row cell contains a date picker. Other filter row cells contain text boxes.

The TreeList supports a specific set of filterOperations for each data type. Users can click a magnifying glass icon in each filter row cell to specify the selectedFilterOperation.

A column's filter value is stored in the filterValue property. You can use this property to set the filter value in code.