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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React from 'react';
import CardView, { Column, HeaderFilter, ColumnHeaderFilter, FilterPanel, FilterBuilder } from 'devextreme-react/card-view';
import { orders, Order } from './data.ts';
function getOrderDay({ OrderDate }: Order): number {
return (new Date(OrderDate)).getDay();
};
const filterValue = [['Employee', '=', 'Clark Morgan'], 'and', ['DeliveryDate', 'weekends']];
const customOperations = [{
name: 'weekends',
caption: 'Weekends',
dataTypes: ['date' as const],
icon: 'check',
hasValue: false,
calculateFilterExpression() {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
},
}];
const saleAmountHeaderFilterDataSource = [
{
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],
},
];
const App = () => (
<CardView
dataSource={orders}
keyExpr="ID"
defaultFilterValue={filterValue}
cardsPerRow="auto"
cardMinWidth={310}
>
<HeaderFilter
visible={true}
/>
<FilterPanel
visible={true}
/>
<FilterBuilder
customOperations={customOperations}
/>
<Column
dataField="OrderNumber"
>
<ColumnHeaderFilter
groupInterval={10000}
/>
</Column>
<Column
dataField="OrderDate"
dataType="date"
/>
<Column
dataField="DeliveryDate"
dataType="date"
/>
<Column
dataField="SaleAmount"
dataType="number"
>
<ColumnHeaderFilter
dataSource={saleAmountHeaderFilterDataSource}
/>
</Column>
<Column
dataField="CustomerStoreCity"
caption="City"
/>
<Column
dataField="Employee"
/>
</CardView>
);
export default App;
import React from 'react';
import CardView, {
Column,
HeaderFilter,
ColumnHeaderFilter,
FilterPanel,
FilterBuilder,
} from 'devextreme-react/card-view';
import { orders } from './data.js';
function getOrderDay({ OrderDate }) {
return new Date(OrderDate).getDay();
}
const filterValue = [['Employee', '=', 'Clark Morgan'], 'and', ['DeliveryDate', 'weekends']];
const customOperations = [
{
name: 'weekends',
caption: 'Weekends',
dataTypes: ['date'],
icon: 'check',
hasValue: false,
calculateFilterExpression() {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
},
},
];
const saleAmountHeaderFilterDataSource = [
{
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],
},
];
const App = () => (
<CardView
dataSource={orders}
keyExpr="ID"
defaultFilterValue={filterValue}
cardsPerRow="auto"
cardMinWidth={310}
>
<HeaderFilter visible={true} />
<FilterPanel visible={true} />
<FilterBuilder customOperations={customOperations} />
<Column dataField="OrderNumber">
<ColumnHeaderFilter groupInterval={10000} />
</Column>
<Column
dataField="OrderDate"
dataType="date"
/>
<Column
dataField="DeliveryDate"
dataType="date"
/>
<Column
dataField="SaleAmount"
dataType="number"
>
<ColumnHeaderFilter dataSource={saleAmountHeaderFilterDataSource} />
</Column>
<Column
dataField="CustomerStoreCity"
caption="City"
/>
<Column dataField="Employee" />
</CardView>
);
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export interface Order {
ID: number;
OrderNumber: number;
SaleAmount: number;
CustomerStoreCity: string;
Employee: string;
OrderDate: string;
DeliveryDate: string;
Terms: string;
};
export const orders: Order[] = [{
ID: 1,
OrderNumber: 35703,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/13',
SaleAmount: 11800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 4,
OrderNumber: 35711,
OrderDate: '2017/01/12',
DeliveryDate: '2017/01/13',
SaleAmount: 16050,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 5,
OrderNumber: 35714,
OrderDate: '2017/01/22',
DeliveryDate: '2017/01/27',
SaleAmount: 14750,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 7,
OrderNumber: 35983,
OrderDate: '2017/02/07',
DeliveryDate: '2017/02/10',
SaleAmount: 3725,
Terms: '15 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 11,
OrderNumber: 38466,
OrderDate: '2017/03/01',
DeliveryDate: '2017/03/03',
SaleAmount: 7800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 14,
OrderNumber: 39420,
OrderDate: '2017/02/15',
DeliveryDate: '2017/02/17',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 15,
OrderNumber: 39874,
OrderDate: '2017/02/04',
DeliveryDate: '2017/02/10',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 18,
OrderNumber: 42847,
OrderDate: '2017/02/15',
DeliveryDate: '2017/02/17',
SaleAmount: 20400,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 30,
OrderNumber: 57429,
OrderDate: '2017/05/16',
DeliveryDate: '2017/05/19',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 32,
OrderNumber: 58292,
OrderDate: '2017/05/13',
DeliveryDate: '2017/05/19',
SaleAmount: 13500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 36,
OrderNumber: 62427,
OrderDate: '2017/01/27',
DeliveryDate: '2017/02/03',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 39,
OrderNumber: 65977,
OrderDate: '2017/02/05',
DeliveryDate: '2017/02/10',
SaleAmount: 2550,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 42,
OrderNumber: 68428,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/14',
SaleAmount: 10500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 43,
OrderNumber: 69477,
OrderDate: '2017/03/09',
DeliveryDate: '2017/03/10',
SaleAmount: 14200,
Terms: '15 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
}, {
ID: 46,
OrderNumber: 72947,
OrderDate: '2017/01/14',
DeliveryDate: '2017/01/20',
SaleAmount: 13350,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 47,
OrderNumber: 73088,
OrderDate: '2017/03/25',
DeliveryDate: '2017/03/31',
SaleAmount: 8600,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 51,
OrderNumber: 77297,
OrderDate: '2017/04/30',
DeliveryDate: '2017/05/05',
SaleAmount: 10850,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 56,
OrderNumber: 84744,
OrderDate: '2017/02/10',
DeliveryDate: '2017/02/17',
SaleAmount: 4650,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 57,
OrderNumber: 85028,
OrderDate: '2017/05/17',
DeliveryDate: '2017/05/19',
SaleAmount: 2575,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 59,
OrderNumber: 87297,
OrderDate: '2017/04/21',
DeliveryDate: '2017/04/28',
SaleAmount: 14200,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 65,
OrderNumber: 94726,
OrderDate: '2017/05/22',
DeliveryDate: '2017/05/26',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 66,
OrderNumber: 95266,
OrderDate: '2017/03/10',
DeliveryDate: '2017/03/17',
SaleAmount: 9050,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 69,
OrderNumber: 98477,
OrderDate: '2017/01/01',
DeliveryDate: '2017/01/06',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
}, {
ID: 78,
OrderNumber: 174884,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/14',
SaleAmount: 7200,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 81,
OrderNumber: 188877,
OrderDate: '2017/02/11',
DeliveryDate: '2017/02/17',
SaleAmount: 8750,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}, {
ID: 82,
OrderNumber: 191883,
OrderDate: '2017/02/05',
DeliveryDate: '2017/02/10',
SaleAmount: 9900,
Terms: '30 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
}, {
ID: 83,
OrderNumber: 192474,
OrderDate: '2017/01/21',
DeliveryDate: '2017/01/27',
SaleAmount: 12800,
Terms: '30 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
}, {
ID: 84,
OrderNumber: 193847,
OrderDate: '2017/03/21',
DeliveryDate: '2017/03/24',
SaleAmount: 14100,
Terms: '30 Days',
CustomerStoreCity: 'San Diego, CA',
Employee: 'Harv Mudd',
}, {
ID: 85,
OrderNumber: 194877,
OrderDate: '2017/03/06',
DeliveryDate: '2017/03/10',
SaleAmount: 4750,
Terms: '30 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
}, {
ID: 86,
OrderNumber: 195746,
OrderDate: '2017/05/26',
DeliveryDate: '2017/06/02',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
}, {
ID: 87,
OrderNumber: 197474,
OrderDate: '2017/03/02',
DeliveryDate: '2017/03/03',
SaleAmount: 6400,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
}, {
ID: 88,
OrderNumber: 198746,
OrderDate: '2017/05/09',
DeliveryDate: '2017/05/12',
SaleAmount: 15700,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
}, {
ID: 91,
OrderNumber: 214222,
OrderDate: '2017/02/08',
DeliveryDate: '2017/02/10',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
}];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@25.1.3/cjs',
'devextreme-react': 'npm:devextreme-react@25.1.3/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.19/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.62/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const orders = [
{
ID: 1,
OrderNumber: 35703,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/13',
SaleAmount: 11800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
},
{
ID: 4,
OrderNumber: 35711,
OrderDate: '2017/01/12',
DeliveryDate: '2017/01/13',
SaleAmount: 16050,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
},
{
ID: 5,
OrderNumber: 35714,
OrderDate: '2017/01/22',
DeliveryDate: '2017/01/27',
SaleAmount: 14750,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 7,
OrderNumber: 35983,
OrderDate: '2017/02/07',
DeliveryDate: '2017/02/10',
SaleAmount: 3725,
Terms: '15 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
},
{
ID: 11,
OrderNumber: 38466,
OrderDate: '2017/03/01',
DeliveryDate: '2017/03/03',
SaleAmount: 7800,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
},
{
ID: 14,
OrderNumber: 39420,
OrderDate: '2017/02/15',
DeliveryDate: '2017/02/17',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
},
{
ID: 15,
OrderNumber: 39874,
OrderDate: '2017/02/04',
DeliveryDate: '2017/02/10',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 18,
OrderNumber: 42847,
OrderDate: '2017/02/15',
DeliveryDate: '2017/02/17',
SaleAmount: 20400,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
},
{
ID: 30,
OrderNumber: 57429,
OrderDate: '2017/05/16',
DeliveryDate: '2017/05/19',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
},
{
ID: 32,
OrderNumber: 58292,
OrderDate: '2017/05/13',
DeliveryDate: '2017/05/19',
SaleAmount: 13500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
},
{
ID: 36,
OrderNumber: 62427,
OrderDate: '2017/01/27',
DeliveryDate: '2017/02/03',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 39,
OrderNumber: 65977,
OrderDate: '2017/02/05',
DeliveryDate: '2017/02/10',
SaleAmount: 2550,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
},
{
ID: 42,
OrderNumber: 68428,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/14',
SaleAmount: 10500,
Terms: '15 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
},
{
ID: 43,
OrderNumber: 69477,
OrderDate: '2017/03/09',
DeliveryDate: '2017/03/10',
SaleAmount: 14200,
Terms: '15 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
},
{
ID: 46,
OrderNumber: 72947,
OrderDate: '2017/01/14',
DeliveryDate: '2017/01/20',
SaleAmount: 13350,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 47,
OrderNumber: 73088,
OrderDate: '2017/03/25',
DeliveryDate: '2017/03/31',
SaleAmount: 8600,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
},
{
ID: 51,
OrderNumber: 77297,
OrderDate: '2017/04/30',
DeliveryDate: '2017/05/05',
SaleAmount: 10850,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
},
{
ID: 56,
OrderNumber: 84744,
OrderDate: '2017/02/10',
DeliveryDate: '2017/02/17',
SaleAmount: 4650,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 57,
OrderNumber: 85028,
OrderDate: '2017/05/17',
DeliveryDate: '2017/05/19',
SaleAmount: 2575,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
},
{
ID: 59,
OrderNumber: 87297,
OrderDate: '2017/04/21',
DeliveryDate: '2017/04/28',
SaleAmount: 14200,
Terms: '30 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
},
{
ID: 65,
OrderNumber: 94726,
OrderDate: '2017/05/22',
DeliveryDate: '2017/05/26',
SaleAmount: 20500,
Terms: '15 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
},
{
ID: 66,
OrderNumber: 95266,
OrderDate: '2017/03/10',
DeliveryDate: '2017/03/17',
SaleAmount: 9050,
Terms: '15 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 69,
OrderNumber: 98477,
OrderDate: '2017/01/01',
DeliveryDate: '2017/01/06',
SaleAmount: 23500,
Terms: '15 Days',
CustomerStoreCity: 'Casper, WY',
Employee: 'Todd Hoffman',
},
{
ID: 78,
OrderNumber: 174884,
OrderDate: '2017/04/10',
DeliveryDate: '2017/04/14',
SaleAmount: 7200,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
},
{
ID: 81,
OrderNumber: 188877,
OrderDate: '2017/02/11',
DeliveryDate: '2017/02/17',
SaleAmount: 8750,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
},
{
ID: 82,
OrderNumber: 191883,
OrderDate: '2017/02/05',
DeliveryDate: '2017/02/10',
SaleAmount: 9900,
Terms: '30 Days',
CustomerStoreCity: 'Los Angeles, CA',
Employee: 'Harv Mudd',
},
{
ID: 83,
OrderNumber: 192474,
OrderDate: '2017/01/21',
DeliveryDate: '2017/01/27',
SaleAmount: 12800,
Terms: '30 Days',
CustomerStoreCity: 'Anaheim, CA',
Employee: 'Harv Mudd',
},
{
ID: 84,
OrderNumber: 193847,
OrderDate: '2017/03/21',
DeliveryDate: '2017/03/24',
SaleAmount: 14100,
Terms: '30 Days',
CustomerStoreCity: 'San Diego, CA',
Employee: 'Harv Mudd',
},
{
ID: 85,
OrderNumber: 194877,
OrderDate: '2017/03/06',
DeliveryDate: '2017/03/10',
SaleAmount: 4750,
Terms: '30 Days',
CustomerStoreCity: 'San Jose, CA',
Employee: 'Jim Packard',
},
{
ID: 86,
OrderNumber: 195746,
OrderDate: '2017/05/26',
DeliveryDate: '2017/06/02',
SaleAmount: 9050,
Terms: '30 Days',
CustomerStoreCity: 'Las Vegas, NV',
Employee: 'Harv Mudd',
},
{
ID: 87,
OrderNumber: 197474,
OrderDate: '2017/03/02',
DeliveryDate: '2017/03/03',
SaleAmount: 6400,
Terms: '30 Days',
CustomerStoreCity: 'Reno, NV',
Employee: 'Clark Morgan',
},
{
ID: 88,
OrderNumber: 198746,
OrderDate: '2017/05/09',
DeliveryDate: '2017/05/12',
SaleAmount: 15700,
Terms: '30 Days',
CustomerStoreCity: 'Denver, CO',
Employee: 'Todd Hoffman',
},
{
ID: 91,
OrderNumber: 214222,
OrderDate: '2017/02/08',
DeliveryDate: '2017/02/10',
SaleAmount: 11050,
Terms: '30 Days',
CustomerStoreCity: 'Phoenix, AZ',
Employee: 'Clark Morgan',
},
];
<!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/25.1.3/css/dx.light.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/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>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
To display the filter panel, set the filterPanel.visible property to true.
A click within the combined filter calls the integrated filter builder. You can configure its settings in the filterBuilder object. In this demo, this object is used to add beforeNoon and afterNoon custom filter operations.
The integrated filter builder displays in a DevExtreme Popup component. You can configure the filter builder popup with the filterBuilderPopup object.