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.

Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-data-grid id="gridContainer" :ref="dataGridRefName" :data-source="orders" :show-borders="true" > <dx-filter-row :visible="showFilterRow" :apply-filter="currentFilter" /> <dx-header-filter :visible="showHeaderFilter" /> <dx-search-panel :visible="true" :width="240" placeholder="Search..." /> <dx-column :width="140" :header-filter="{ groupInterval: 10000 }" data-field="OrderNumber" caption="Invoice Number" /> <dx-column :width="120" :calculate-filter-expression="calculateFilterExpression" :header-filter="{ dataSource: orderHeaderFilter }" data-field="OrderDate" alignment="right" data-type="date" /> <dx-column :width="180" data-field="DeliveryDate" alignment="right" data-type="datetime" format="M/d/yyyy, HH:mm" /> <dx-column :header-filter="{ dataSource: saleAmountHeaderFilter }" :editor-options="{ format: 'currency', showClearButton: true }" data-field="SaleAmount" alignment="right" format="currency" /> <dx-column data-field="Employee"/> <dx-column :header-filter="{ allowSearch: true }" data-field="CustomerStoreCity" caption="City" /> </dx-data-grid> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Apply Filter</span> <dx-select-box id="useFilterApplyButton" :items="applyFilterTypes" :value.sync="currentFilter" :disabled="!showFilterRow" value-expr="key" display-expr="name" /> </div> <div class="option"> <dx-check-box :value.sync="showFilterRow" text="Filter Row" @valueChanged="clearFilter()" /> </div> <div class="option"> <dx-check-box :value.sync="showHeaderFilter" text="Header Filter" @valueChanged="clearFilter()" /> </div> </div> </div> </template> <script> import { DxDataGrid, DxColumn, DxHeaderFilter, DxSearchPanel, DxFilterRow } from 'devextreme-vue/data-grid'; import { DxSelectBox, DxCheckBox } from 'devextreme-vue'; import service from './data.js'; const getOrderDay = (rowData) => { return (new Date(rowData.OrderDate)).getDay(); }; export default { components: { DxSelectBox, DxCheckBox, DxDataGrid, DxColumn, DxHeaderFilter, DxSearchPanel, DxFilterRow }, data() { const applyFilterTypes = [ { key: 'auto', name: 'Immediately' }, { key: 'onClick', name: 'On Button Click' }], currentFilter = applyFilterTypes[0].key; return { orders: service.getOrders(), showFilterRow: true, showHeaderFilter: true, applyFilterTypes, 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] }], currentFilter, dataGridRefName: 'dataGrid' }; }, methods: { 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; }; }, clearFilter() { this.$refs[this.dataGridRefName].instance.clearFilter(); } } }; </script> <style scoped> #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; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.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>
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/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@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', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });