Your search did not match any results.
Data Grid

Filtering

Documentation

This example demonstrates the DataGrid’s built-in filtering and searching capabilities. The filter row, located under the column headers, allows a user to type any value and select filter operations. With the header filter, which is called by clicking the filter icon in any column header, a user can choose from a set of predefined values. The search panel at the top of the DataGrid allows searching for values in all columns at once.

Apply
Reset
import React from 'react'; import DataGrid, { Column, FilterRow, HeaderFilter, SearchPanel } from 'devextreme-react/data-grid'; import { SelectBox, CheckBox } from 'devextreme-react'; import service from './data.js'; const getOrderDay = (rowData) => { return (new Date(rowData.OrderDate)).getDay(); }; const saleAmountEditorOptions = { format: 'currency', showClearButton: true }; class App extends React.Component { constructor(props) { super(props); this.orders = service.getOrders(); this.applyFilterTypes = [{ key: 'auto', name: 'Immediately' }, { key: 'onClick', name: 'On Button Click' }]; this.saleAmountHeaderFilter = [{ text: 'Less than $3000', value: ['SaleAmount', '<', 3000] }, { text: '$3000 - $5000', value: [ ['SaleAmount', '>=', 3000], ['SaleAmount', '<', 5000] ] }, { text: '$5000 - $10000', value: [ ['SaleAmount', '>=', 5000], ['SaleAmount', '<', 10000] ] }, { text: '$10000 - $20000', value: [ ['SaleAmount', '>=', 10000], ['SaleAmount', '<', 20000] ] }, { text: 'Greater than $20000', value: ['SaleAmount', '>=', 20000] }]; this.state = { showFilterRow: true, showHeaderFilter: true, currentFilter: this.applyFilterTypes[0].key }; this.dataGrid = null; this.orderHeaderFilter = this.orderHeaderFilter.bind(this); this.onShowFilterRowChanged = this.onShowFilterRowChanged.bind(this); this.onShowHeaderFilterChanged = this.onShowHeaderFilterChanged.bind(this); this.onCurrentFilterChanged = this.onCurrentFilterChanged.bind(this); } calculateFilterExpression(value, selectedFilterOperations, target) { let column = this; if (target === 'headerFilter' && value === 'weekends') { return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]]; } return column.defaultCalculateFilterExpression.apply(this, arguments); } orderHeaderFilter(data) { data.dataSource.postProcess = (results) => { results.push({ text: 'Weekends', value: 'weekends' }); return results; }; } onShowFilterRowChanged(e) { this.setState({ showFilterRow: e.value }); this.clearFilter(); } onShowHeaderFilterChanged(e) { this.setState({ showHeaderFilter: e.value }); this.clearFilter(); } onCurrentFilterChanged(e) { this.setState({ currentFilter: e.value }); } clearFilter() { this.dataGrid.instance.clearFilter(); } render() { return ( <div> <DataGrid id={'gridContainer'} ref={(ref) => this.dataGrid = ref} dataSource={this.orders} showBorders={true}> <FilterRow visible={this.state.showFilterRow} applyFilter={this.state.currentFilter} /> <HeaderFilter visible={this.state.showHeaderFilter} /> <SearchPanel visible={true} width={240} placeholder={'Search...'} /> <Column dataField={'OrderNumber'} width={140} caption={'Invoice Number'}> <HeaderFilter groupInterval={10000} /> </Column> <Column dataField={'OrderDate'} alignment={'right'} dataType={'date'} width={120} calculateFilterExpression={this.calculateFilterExpression}> <HeaderFilter dataSource={this.orderHeaderFilter} /> </Column> <Column dataField={'DeliveryDate'} alignment={'right'} dataType={'datetime'} format={'M/d/yyyy, HH:mm'} width={180} /> <Column dataField={'SaleAmount'} alignment={'right'} dataType={'number'} format={'currency'} editorOptions={saleAmountEditorOptions}> <HeaderFilter dataSource={this.saleAmountHeaderFilter} /> </Column> <Column dataField={'Employee'} /> <Column dataField={'CustomerStoreCity'} caption={'City'}> <HeaderFilter allowSearch={true} /> </Column> </DataGrid> <div className={'options'}> <div className={'caption'}>Options</div> <div className={'option'}> <span>Apply Filter </span> <SelectBox items={this.applyFilterTypes} value={this.state.currentFilter} onValueChanged={this.onCurrentFilterChanged} valueExpr={'key'} displayExpr={'name'} disabled={!this.state.showFilterRow} /> </div> <div className={'option'}> <CheckBox text={'Filter Row'} value={this.state.showFilterRow} onValueChanged={this.onShowFilterRowChanged} /> </div> <div className={'option'}> <CheckBox text={'Header Filter'} value={this.state.showHeaderFilter} onValueChanged={this.onShowHeaderFilterChanged} /> </div> </div> </div> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!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/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#gridContainer { height: 440px; } .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; }
const orders = [{ 'ID': 1, 'OrderNumber': 35703, 'OrderDate': '2017/04/10', 'DeliveryDate': '2017/04/13 9:00', 'SaleAmount': 11800, 'Terms': '15 Days', 'CustomerStoreCity': 'Los Angeles, CA', 'Employee': 'Harv Mudd' }, { 'ID': 4, 'OrderNumber': 35711, 'OrderDate': '2017/01/12', 'DeliveryDate': '2017/01/13 9:00', 'SaleAmount': 16050, 'Terms': '15 Days', 'CustomerStoreCity': 'San Jose, CA', 'Employee': 'Jim Packard' }, { 'ID': 5, 'OrderNumber': 35714, 'OrderDate': '2017/01/22', 'DeliveryDate': '2017/01/27 9:00', 'SaleAmount': 14750, 'Terms': '15 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 7, 'OrderNumber': 35983, 'OrderDate': '2017/02/07', 'DeliveryDate': '2017/02/10 13:00', 'SaleAmount': 3725, 'Terms': '15 Days', 'CustomerStoreCity': 'Denver, CO', 'Employee': 'Todd Hoffman' }, { 'ID': 11, 'OrderNumber': 38466, 'OrderDate': '2017/03/01', 'DeliveryDate': '2017/03/03 17:45', 'SaleAmount': 7800, 'Terms': '15 Days', 'CustomerStoreCity': 'Los Angeles, CA', 'Employee': 'Harv Mudd' }, { 'ID': 14, 'OrderNumber': 39420, 'OrderDate': '2017/02/15', 'DeliveryDate': '2017/02/17 11:45', 'SaleAmount': 20500, 'Terms': '15 Days', 'CustomerStoreCity': 'San Jose, CA', 'Employee': 'Jim Packard' }, { 'ID': 15, 'OrderNumber': 39874, 'OrderDate': '2017/02/04', 'DeliveryDate': '2017/02/10 15:00', 'SaleAmount': 9050, 'Terms': '30 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 18, 'OrderNumber': 42847, 'OrderDate': '2017/02/15', 'DeliveryDate': '2017/02/17 8:30', 'SaleAmount': 20400, 'Terms': '30 Days', 'CustomerStoreCity': 'Casper, WY', 'Employee': 'Todd Hoffman' }, { 'ID': 30, 'OrderNumber': 57429, 'OrderDate': '2017/05/16', 'DeliveryDate': '2017/05/19 11:45', 'SaleAmount': 11050, 'Terms': '30 Days', 'CustomerStoreCity': 'Phoenix, AZ', 'Employee': 'Clark Morgan' }, { 'ID': 32, 'OrderNumber': 58292, 'OrderDate': '2017/05/13', 'DeliveryDate': '2017/05/19 14:30', 'SaleAmount': 13500, 'Terms': '15 Days', 'CustomerStoreCity': 'Los Angeles, CA', 'Employee': 'Harv Mudd' }, { 'ID': 36, 'OrderNumber': 62427, 'OrderDate': '2017/01/27', 'DeliveryDate': '2017/02/03 18:00', 'SaleAmount': 23500, 'Terms': '15 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 39, 'OrderNumber': 65977, 'OrderDate': '2017/02/05', 'DeliveryDate': '2017/02/10 13:15', 'SaleAmount': 2550, 'Terms': '15 Days', 'CustomerStoreCity': 'Casper, WY', 'Employee': 'Todd Hoffman' }, { 'ID': 42, 'OrderNumber': 68428, 'OrderDate': '2017/04/10', 'DeliveryDate': '2017/04/14 11:30', 'SaleAmount': 10500, 'Terms': '15 Days', 'CustomerStoreCity': 'Los Angeles, CA', 'Employee': 'Harv Mudd' }, { 'ID': 43, 'OrderNumber': 69477, 'OrderDate': '2017/03/09', 'DeliveryDate': '2017/03/10 12:00', 'SaleAmount': 14200, 'Terms': '15 Days', 'CustomerStoreCity': 'Anaheim, CA', 'Employee': 'Harv Mudd' }, { 'ID': 46, 'OrderNumber': 72947, 'OrderDate': '2017/01/14', 'DeliveryDate': '2017/01/20 9:00', 'SaleAmount': 13350, 'Terms': '30 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 47, 'OrderNumber': 73088, 'OrderDate': '2017/03/25', 'DeliveryDate': '2017/03/31 17:15', 'SaleAmount': 8600, 'Terms': '30 Days', 'CustomerStoreCity': 'Reno, NV', 'Employee': 'Clark Morgan' }, { 'ID': 51, 'OrderNumber': 77297, 'OrderDate': '2017/04/30', 'DeliveryDate': '2017/05/05 18:00', 'SaleAmount': 10850, 'Terms': '30 Days', 'CustomerStoreCity': 'Phoenix, AZ', 'Employee': 'Clark Morgan' }, { 'ID': 56, 'OrderNumber': 84744, 'OrderDate': '2017/02/10', 'DeliveryDate': '2017/02/17 14:00', 'SaleAmount': 4650, 'Terms': '30 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 57, 'OrderNumber': 85028, 'OrderDate': '2017/05/17', 'DeliveryDate': '2017/05/19 12:00', 'SaleAmount': 2575, 'Terms': '30 Days', 'CustomerStoreCity': 'Reno, NV', 'Employee': 'Clark Morgan' }, { 'ID': 59, 'OrderNumber': 87297, 'OrderDate': '2017/04/21', 'DeliveryDate': '2017/04/28 9:00', 'SaleAmount': 14200, 'Terms': '30 Days', 'CustomerStoreCity': 'Casper, WY', 'Employee': 'Todd Hoffman' }, { 'ID': 65, 'OrderNumber': 94726, 'OrderDate': '2017/05/22', 'DeliveryDate': '2017/05/26 13:30', 'SaleAmount': 20500, 'Terms': '15 Days', 'CustomerStoreCity': 'San Jose, CA', 'Employee': 'Jim Packard' }, { 'ID': 66, 'OrderNumber': 95266, 'OrderDate': '2017/03/10', 'DeliveryDate': '2017/03/17 11:45', 'SaleAmount': 9050, 'Terms': '15 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 69, 'OrderNumber': 98477, 'OrderDate': '2017/01/01', 'DeliveryDate': '2017/01/06 9:00', 'SaleAmount': 23500, 'Terms': '15 Days', 'CustomerStoreCity': 'Casper, WY', 'Employee': 'Todd Hoffman' }, { 'ID': 78, 'OrderNumber': 174884, 'OrderDate': '2017/04/10', 'DeliveryDate': '2017/04/14 8:30', 'SaleAmount': 7200, 'Terms': '30 Days', 'CustomerStoreCity': 'Denver, CO', 'Employee': 'Todd Hoffman' }, { 'ID': 81, 'OrderNumber': 188877, 'OrderDate': '2017/02/11', 'DeliveryDate': '2017/02/17 16:00', 'SaleAmount': 8750, 'Terms': '30 Days', 'CustomerStoreCity': 'Phoenix, AZ', 'Employee': 'Clark Morgan' }, { 'ID': 82, 'OrderNumber': 191883, 'OrderDate': '2017/02/05', 'DeliveryDate': '2017/02/10 18:30', 'SaleAmount': 9900, 'Terms': '30 Days', 'CustomerStoreCity': 'Los Angeles, CA', 'Employee': 'Harv Mudd' }, { 'ID': 83, 'OrderNumber': 192474, 'OrderDate': '2017/01/21', 'DeliveryDate': '2017/01/27 12:45', 'SaleAmount': 12800, 'Terms': '30 Days', 'CustomerStoreCity': 'Anaheim, CA', 'Employee': 'Harv Mudd' }, { 'ID': 84, 'OrderNumber': 193847, 'OrderDate': '2017/03/21', 'DeliveryDate': '2017/03/24 9:00', 'SaleAmount': 14100, 'Terms': '30 Days', 'CustomerStoreCity': 'San Diego, CA', 'Employee': 'Harv Mudd' }, { 'ID': 85, 'OrderNumber': 194877, 'OrderDate': '2017/03/06', 'DeliveryDate': '2017/03/10 18:15', 'SaleAmount': 4750, 'Terms': '30 Days', 'CustomerStoreCity': 'San Jose, CA', 'Employee': 'Jim Packard' }, { 'ID': 86, 'OrderNumber': 195746, 'OrderDate': '2017/05/26', 'DeliveryDate': '2017/06/02 17:00', 'SaleAmount': 9050, 'Terms': '30 Days', 'CustomerStoreCity': 'Las Vegas, NV', 'Employee': 'Harv Mudd' }, { 'ID': 87, 'OrderNumber': 197474, 'OrderDate': '2017/03/02', 'DeliveryDate': '2017/03/03 11:00', 'SaleAmount': 6400, 'Terms': '30 Days', 'CustomerStoreCity': 'Reno, NV', 'Employee': 'Clark Morgan' }, { 'ID': 88, 'OrderNumber': 198746, 'OrderDate': '2017/05/09', 'DeliveryDate': '2017/05/12 15:45', 'SaleAmount': 15700, 'Terms': '30 Days', 'CustomerStoreCity': 'Denver, CO', 'Employee': 'Todd Hoffman' }, { 'ID': 91, 'OrderNumber': 214222, 'OrderDate': '2017/02/08', 'DeliveryDate': '2017/02/10 9:45', 'SaleAmount': 11050, 'Terms': '30 Days', 'CustomerStoreCity': 'Phoenix, AZ', 'Employee': 'Clark Morgan' }]; export default { getOrders() { return orders; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });