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
<template>
<DxCardView
id="cardView"
:data-source="orders"
key-expr="ID"
:filter-value="filterValue"
cards-per-row="auto"
:card-min-width="310"
>
<DxHeaderFilter
:visible="true"
/>
<DxFilterPanel
:visible="true"
/>
<DxFilterBuilder
:custom-operations="customOperations"
/>
<DxColumn
data-field="OrderNumber"
>
<DxColumnHeaderFilter
:group-interval="10000"
/>
</DxColumn>
<DxColumn
data-field="OrderDate"
data-type="date"
/>
<DxColumn
data-field="DeliveryDate"
data-type="date"
/>
<DxColumn
data-field="SaleAmount"
data-type="number"
>
<DxColumnHeaderFilter
:data-source="saleAmountHeaderFilterDataSource"
/>
</DxColumn>
<DxColumn
data-field="CustomerStoreCity"
caption="City"
/>
<DxColumn
data-field="Employee"
/>
</DxCardView>
</template>
<script setup lang="ts">
import { DxCardView, DxColumn, DxHeaderFilter, DxColumnHeaderFilter, DxFilterBuilder, DxFilterPanel } from 'devextreme-vue/card-view';
import { type Order, orders } from './data.ts';
function getOrderDay({ OrderDate }: Order): number {
return (new Date(OrderDate)).getDay();
};
const customOperations = [{
name: 'weekends',
caption: 'Weekends',
dataTypes: ['date' as const],
icon: 'check',
hasValue: false,
calculateFilterExpression() {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
},
}];
const filterValue = [['Employee', '=', 'Clark Morgan'], 'and', ['DeliveryDate', 'weekends']];
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],
},
];
</script>
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'project:': '../../../../',
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
map: {
'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js',
'@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.2/index.js',
'demo-ts-loader': 'project:utils/demo-ts-loader.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'svg-loader': 'project:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.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-vue': 'npm:devextreme-vue@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',
'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-vue': {
main: 'index.js',
},
'devextreme-vue/common': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);
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',
}];
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#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/25.1.3/css/dx.light.css" />
<script type="module">
import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script>
<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.ts");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app" />
</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.