With List

Documentation

This demo shows how to filter data in the List using the FilterBuilder component. Note that the DataSource does not support the "between" operation. Call the getFilterExpression() method to convert it into DataSource-compatible operations.

Prev Demo

Next Demo

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!

Backend API

import React from 'react'; import FilterBuilder from 'devextreme-react/filter-builder'; import Button from 'devextreme-react/button'; import List from 'devextreme-react/list'; import DataSource from 'devextreme/data/data_source'; import { filter, fields, products } from './data.js'; import CustomItem from './CustomItem.js'; class App extends React.Component { constructor(props) { super(props); this.dataSource = new DataSource({ store: products, }); this.filterBuilderInstance = null; this.state = { value: filter, }; this.onValueChanged = this.onValueChanged.bind(this); this.refreshDataSource = this.refreshDataSource.bind(this); this.setFilterBuilderInstance = this.setFilterBuilderInstance.bind(this); } render() { return ( <div> <div className="filter-container"> <FilterBuilder ref={this.setFilterBuilderInstance} fields={fields} value={this.state.value} onValueChanged={this.onValueChanged} /> <Button text="Apply Filter" type="default" onClick={this.refreshDataSource} /> <div className="dx-clearfix"></div> </div> <div className="list-container"> <List dataSource={this.dataSource} itemRender={CustomItem} /> </div> </div> ); } setFilterBuilderInstance(ref) { this.filterBuilderInstance = ref.instance; this.refreshDataSource(); } onValueChanged(e) { this.setState({ value: e.value, }); } refreshDataSource() { this.dataSource.filter(this.filterBuilderInstance.getFilterExpression()); this.dataSource.load(); } } 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/23.1.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.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.filter-container { background-color: rgba(191, 191, 191, 0.15); width: 55%; float: left; margin-bottom: 25px; height: 430px; } .dx-filterbuilder { padding: 10px; height: 360px; margin: 5px; overflow: auto; } .dx-filterbuilder .dx-texteditor { width: 135px; } .dx-button { margin: 10px 20px; float: right; } .list-container { float: right; width: 45%; } .list-container .dx-scrollable-container { max-height: 430px; padding-left: 30px; } .product { height: 65px; } .product > img { height: 100%; float: left; } .product > div { padding-left: 10px; vertical-align: top; line-height: 65px; font-size: 15px; float: left; } .product > div.price { float: right; font-size: 18px; } .dx-filterbuilder .dx-numberbox { width: 80px; }

import React from 'react'; const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, }); export default function CustomItem(item) { return ( <div className="product"> <img src={item.ImageSrc} /> <div>{item.Name}</div> <div className="price">{currencyFormatter.format(item.Price)}</div> </div> ); }

export const filter = [ ['Category', '=', 'Video Players'], 'or', [ ['Category', '=', 'Monitors'], 'and', ['Price', 'between', [165, 700]], ], 'or', [ ['Category', '=', 'Televisions'], 'and', ['Price', 'between', [2000, 4000]], ], ]; const categories = [ 'Video Players', 'Televisions', 'Monitors', 'Projectors', 'Automation', ]; export const fields = [ { dataField: 'ID', dataType: 'number', }, { dataField: 'Name', }, { dataField: 'Price', dataType: 'number', format: 'currency', }, { dataField: 'Current_Inventory', dataType: 'number', caption: 'Inventory', }, { dataField: 'Category', lookup: { dataSource: categories, }, }, ]; export const products = [{ ID: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', ImageSrc: '../../../../images/products/1.png', }, { ID: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/3.png', }, { ID: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: '../../../../images/products/4.png', }, { ID: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/5.png', }, { ID: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/6.png', }, { ID: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: '../../../../images/products/7.png', }, { ID: 8, Name: 'SuperPlasma 65', Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/8.png', }, { ID: 9, Name: 'SuperLCD 70', Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/9.png', }, { ID: 10, Name: 'DesktopLED 21', Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: 'Monitors', ImageSrc: '../../../../images/products/10.png', }, { ID: 12, Name: 'DesktopLCD 21', Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: 'Monitors', ImageSrc: '../../../../images/products/12.png', }, { ID: 13, Name: 'DesktopLCD 19', Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: 'Monitors', ImageSrc: '../../../../images/products/13.png', }, { ID: 14, Name: 'Projector Plus', Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: 'Projectors', ImageSrc: '../../../../images/products/14.png', }, { ID: 15, Name: 'Projector PlusHD', Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: 'Projectors', ImageSrc: '../../../../images/products/15.png', }, { ID: 17, Name: 'ExcelRemote IR', Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: 'Automation', ImageSrc: '../../../../images/products/17.png', }, { ID: 18, Name: 'ExcelRemote BT', Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: 'Automation', ImageSrc: '../../../../images/products/18.png', }, { ID: 19, Name: 'ExcelRemote IP', Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: 'Automation', ImageSrc: '../../../../images/products/19.png', }];