React Data Grid - Filtering API

The DataGrid includes the following API you can use to filter data.

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

import React, { useCallback, useRef, useState } from 'react'; import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid'; import SelectBox from 'devextreme-react/select-box'; import 'devextreme/data/odata/store'; const dataSourceOptions = { store: { type: 'odata' as const, version: 2, url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks', key: 'Task_ID', }, expand: 'ResponsibleEmployee', select: [ 'Task_ID', 'Task_Subject', 'Task_Start_Date', 'Task_Status', 'ResponsibleEmployee/Employee_Full_Name', ], }; const statuses = ['All', 'Not Started', 'In Progress', 'Need Assistance', 'Deferred', 'Completed']; const statusLabel = { 'aria-label': 'Status' }; const App = () => { const [filterStatus, setFilterStatus] = useState(statuses[0]); const dataGridRef = useRef<DataGridRef>(null); const onValueChanged = useCallback(({ value }) => { const dataGrid = dataGridRef.current.instance(); if (value === 'All') { dataGrid.clearFilter(); } else { dataGrid.filter(['Task_Status', '=', value]); } setFilterStatus(value); }, []); return ( <div> <div className="left-side"> <div className="logo"> <img src="../../../../images/logo-devav.png" alt="DEVAV"/>   <img src="../../../../images/logo-tasks.png" alt="Tasks"/> </div> </div> <div className="right-side"> <SelectBox items={statuses} inputAttr={statusLabel} value={filterStatus} onValueChanged={onValueChanged} /> </div> <DataGrid id="gridContainer" ref={dataGridRef} dataSource={dataSourceOptions} columnAutoWidth={true} showBorders={true} > <Column dataField="Task_ID" width={80} /> <Column dataField="Task_Start_Date" caption="Start Date" dataType="date" /> <Column allowSorting={false} dataField="ResponsibleEmployee.Employee_Full_Name" cssClass="employee" caption="Assigned To" /> <Column dataField="Task_Subject" caption="Subject" width={350} /> <Column dataField="Task_Status" caption="Status" /> </DataGrid> </div> ); }; export default App;

import React, { useCallback, useRef, useState } from 'react'; import DataGrid, { Column } from 'devextreme-react/data-grid'; import SelectBox from 'devextreme-react/select-box'; import 'devextreme/data/odata/store'; const dataSourceOptions = { store: { type: 'odata', version: 2, url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks', key: 'Task_ID', }, expand: 'ResponsibleEmployee', select: [ 'Task_ID', 'Task_Subject', 'Task_Start_Date', 'Task_Status', 'ResponsibleEmployee/Employee_Full_Name', ], }; const statuses = ['All', 'Not Started', 'In Progress', 'Need Assistance', 'Deferred', 'Completed']; const statusLabel = { 'aria-label': 'Status' }; const App = () => { const [filterStatus, setFilterStatus] = useState(statuses[0]); const dataGridRef = useRef(null); const onValueChanged = useCallback(({ value }) => { const dataGrid = dataGridRef.current.instance(); if (value === 'All') { dataGrid.clearFilter(); } else { dataGrid.filter(['Task_Status', '=', value]); } setFilterStatus(value); }, []); return ( <div> <div className="left-side"> <div className="logo"> <img src="../../../../images/logo-devav.png" alt="DEVAV" />   <img src="../../../../images/logo-tasks.png" alt="Tasks" /> </div> </div> <div className="right-side"> <SelectBox items={statuses} inputAttr={statusLabel} value={filterStatus} onValueChanged={onValueChanged} /> </div> <DataGrid id="gridContainer" ref={dataGridRef} dataSource={dataSourceOptions} columnAutoWidth={true} showBorders={true} > <Column dataField="Task_ID" width={80} /> <Column dataField="Task_Start_Date" caption="Start Date" dataType="date" /> <Column allowSorting={false} dataField="ResponsibleEmployee.Employee_Full_Name" cssClass="employee" caption="Assigned To" /> <Column dataField="Task_Subject" caption="Subject" width={350} /> <Column dataField="Task_Status" caption="Status" /> </DataGrid> </div> ); }; export default App;

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

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

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/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>

.right-side { position: absolute; right: 1px; top: 6px; } .logo { line-height: 48px; } .logo img { vertical-align: middle; margin: 0 5px; } .dx-row.dx-data-row .employee { color: #bf4e6a; font-weight: bold; } #gridContainer { margin: 20px 0; height: 400px; }

filter() / filter(filterExpr)
Gets or sets a filter expression for the grid's dataSource.
filterValue
A filter expression that is applied with the following UI elements: filter row, header filter, filter builder.
getCombinedFilter() / getCombinedFilter(returnDataField)
Gets the total filter that includes filters from the UI elements and the filter applied to the dataSource. If you specify the returnDataField parameter, the returned value contains data field names instead of getters.
clearFilter() / clearFilter(filterName)
Discards all filters applied to the DataGrid. If you specify the filterName parameter, this method discards all filters of a specific type.

In this demo, you can use the SelectBox component to filter the grid's dataSource. The "All" item calls the clearFilter() method and the other items call the filter(filterExpr) method.