Backend API
import React, { useCallback, useRef, useEffect } from 'react';
import FilterBuilder from 'devextreme-react/filter-builder';
import type { FilterBuilderRef } from 'devextreme-react/filter-builder';
import Button from 'devextreme-react/button';
import List from 'devextreme-react/list';
import { DataSource } from 'devextreme-react/common/data';
import { filter, fields, products } from './data.ts';
import CustomItem from './CustomItem.tsx';
const App = () => {
const dataSource = useRef(new DataSource({
store: products,
}));
const filterBuilderRef = useRef<FilterBuilderRef>(null);
const refreshDataSource = useCallback(() => {
const filterExpression = filterBuilderRef.current?.instance().getFilterExpression();
dataSource.current.filter(filterExpression);
dataSource.current.load();
}, []);
useEffect(() => {
refreshDataSource();
}, [refreshDataSource]);
return (
<div>
<div className="filter-container">
<FilterBuilder ref={filterBuilderRef}
fields={fields}
defaultValue={filter} />
<Button
text="Apply Filter"
type="default"
onClick={refreshDataSource} />
<div className="dx-clearfix"></div>
</div>
<div className="list-container">
<List dataSource={dataSource.current} itemRender={CustomItem} />
</div>
</div>
);
};
export default App;
import React, { useCallback, useRef, useEffect } 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-react/common/data';
import { filter, fields, products } from './data.js';
import CustomItem from './CustomItem.js';
const App = () => {
const dataSource = useRef(
new DataSource({
store: products,
}),
);
const filterBuilderRef = useRef(null);
const refreshDataSource = useCallback(() => {
const filterExpression = filterBuilderRef.current?.instance().getFilterExpression();
dataSource.current.filter(filterExpression);
dataSource.current.load();
}, []);
useEffect(() => {
refreshDataSource();
}, [refreshDataSource]);
return (
<div>
<div className="filter-container">
<FilterBuilder
ref={filterBuilderRef}
fields={fields}
defaultValue={filter}
/>
<Button
text="Apply Filter"
type="default"
onClick={refreshDataSource}
/>
<div className="dx-clearfix"></div>
</div>
<div className="list-container">
<List
dataSource={dataSource.current}
itemRender={CustomItem}
/>
</div>
</div>
);
};
export default App;
import React from 'react';
import type { Product } from './data.ts';
const currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
export default function CustomItem(item: Product) {
return (
<div className="product">
<img
src={item.ImageSrc}
alt={`Picture of ${item.Name}`}
/>
<div>{item.Name}</div>
<div className="price">{currencyFormatter.format(item.Price)}</div>
</div>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
export interface Product {
ID: number;
Name: string;
Price: number;
Current_Inventory: number | null;
Backorder: number;
Manufacturing: number;
Category: string;
ImageSrc: string;
}
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: FilterBuilderTypes.Field[] = [
{
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: Product[] = [{
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',
}];
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}
alt={`Picture of ${item.Name}`}
/>
<div>{item.Name}</div>
<div className="price">{currencyFormatter.format(item.Price)}</div>
</div>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
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',
},
];
<!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/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
.filter-container {
background-color: transparent;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
border-radius: 6px;
width: 45%;
float: left;
margin: 24px;
height: 430px;
}
.dx-filterbuilder {
background-color: transparent;
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;
}