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
:data-source="tasks"
key-expr="Task_ID"
cards-per-row="auto"
:card-min-width="310"
:word-wrap-enabled="true"
>
<DxSearchPanel
:visible="true"
text="an"
/>
<DxHeaderFilter
:visible="true"
/>
<DxColumn
data-field="Task_Subject"
caption="Subject"
/>
<DxColumn
data-field="Task_Start_Date"
caption="Start Date"
data-type="date"
/>
<DxColumn
data-field="Task_Due_Date"
caption="Due Date"
data-type="date"
/>
<DxColumn
data-field="Task_Priority"
caption="Priority"
/>
<DxColumn
data-field="Task_Status"
caption="Status"
/>
</DxCardView>
</template>
<script setup lang="ts">
import { DxCardView, DxColumn, DxSearchPanel, DxHeaderFilter } from 'devextreme-vue/card-view';
import { tasks } from './data.ts';
</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 Task {
Task_ID: number;
Task_Assigned_Employee_ID: number;
Task_Owner_ID: number;
Task_Subject: string;
Task_Start_Date: string;
Task_Due_Date: string;
Task_Status: string;
Task_Priority: number;
Task_Completion: number;
}
export const tasks: Task[] = [{
'Task_ID': 1,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 2013 Financial',
'Task_Start_Date': '2013-01-15T00:00:00',
'Task_Due_Date': '2013-01-31T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 2,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 3013 Marketing Plan',
'Task_Start_Date': '2013-01-01T00:00:00',
'Task_Due_Date': '2013-01-31T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 3,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 1,
'Task_Subject': 'Update Personnel Files',
'Task_Start_Date': '2013-02-03T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 4,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 1,
'Task_Subject': 'Review Health Insurance Options Under the Affordable Care Act',
'Task_Start_Date': '2013-02-12T00:00:00',
'Task_Due_Date': '2013-04-25T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 4,
'Task_Completion': 50,
}, {
'Task_ID': 5,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 2,
'Task_Subject': 'Choose between PPO and HMO Health Plan',
'Task_Start_Date': '2013-02-15T00:00:00',
'Task_Due_Date': '2013-04-15T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 4,
'Task_Completion': 75,
}, {
'Task_ID': 6,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 4,
'Task_Subject': 'Google AdWords Strategy',
'Task_Start_Date': '2013-02-16T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 7,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 4,
'Task_Subject': 'New Brochures',
'Task_Start_Date': '2013-02-17T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 8,
'Task_Assigned_Employee_ID': 28,
'Task_Owner_ID': 1,
'Task_Subject': '2013 Brochure Designs',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 9,
'Task_Assigned_Employee_ID': 29,
'Task_Owner_ID': 28,
'Task_Subject': 'Brochure Design Review',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 10,
'Task_Assigned_Employee_ID': 29,
'Task_Owner_ID': 28,
'Task_Subject': 'Website Re-Design Plan',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 11,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 1,
'Task_Subject': 'Rollout of New Website and Marketing Brochures',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 12,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 4,
'Task_Subject': 'Update Sales Strategy Documents',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 13,
'Task_Assigned_Employee_ID': 41,
'Task_Owner_ID': 8,
'Task_Subject': 'Create 2012 Sales Report',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-21T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 14,
'Task_Assigned_Employee_ID': 42,
'Task_Owner_ID': 41,
'Task_Subject': 'Direct vs Online Sales Comparison Report',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 15,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 41,
'Task_Subject': 'Review 2012 Sales Report and Approve 2013 Plans',
'Task_Start_Date': '2013-02-23T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 16,
'Task_Assigned_Employee_ID': 3,
'Task_Owner_ID': 1,
'Task_Subject': 'Deliver R&D Plans for 2013',
'Task_Start_Date': '2013-03-01T00:00:00',
'Task_Due_Date': '2013-03-10T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 17,
'Task_Assigned_Employee_ID': 32,
'Task_Owner_ID': 3,
'Task_Subject': 'Create 2013 R&D Plans',
'Task_Start_Date': '2013-03-01T00:00:00',
'Task_Due_Date': '2013-03-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 18,
'Task_Assigned_Employee_ID': 33,
'Task_Owner_ID': 32,
'Task_Subject': '2013 QA Strategy Report',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-05T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 19,
'Task_Assigned_Employee_ID': 31,
'Task_Owner_ID': 33,
'Task_Subject': '2013 Training Events',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-04T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 20,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 31,
'Task_Subject': 'Approve Hiring of John Jeffers',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-12T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 21,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 5,
'Task_Subject': 'Non-Compete Agreements',
'Task_Start_Date': '2013-03-12T00:00:00',
'Task_Due_Date': '2013-03-14T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 1,
'Task_Completion': 100,
}, {
'Task_ID': 22,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 2,
'Task_Subject': 'Update NDA Agreement',
'Task_Start_Date': '2013-03-14T00:00:00',
'Task_Due_Date': '2013-03-16T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 23,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 2,
'Task_Subject': 'Update Employee Files with New NDA',
'Task_Start_Date': '2013-03-16T00:00:00',
'Task_Due_Date': '2013-03-26T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 2,
'Task_Completion': 90,
}, {
'Task_ID': 24,
'Task_Assigned_Employee_ID': 6,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 25,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 26,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 3,
'Task_Completion': 25,
}, {
'Task_ID': 27,
'Task_Assigned_Employee_ID': 9,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 28,
'Task_Assigned_Employee_ID': 17,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 29,
'Task_Assigned_Employee_ID': 18,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 30,
'Task_Assigned_Employee_ID': 19,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 4,
'Task_Completion': 25,
}, {
'Task_ID': 31,
'Task_Assigned_Employee_ID': 14,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 32,
'Task_Assigned_Employee_ID': 13,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 33,
'Task_Assigned_Employee_ID': 15,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 34,
'Task_Assigned_Employee_ID': 16,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 35,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Update Revenue Projections',
'Task_Start_Date': '2013-03-24T00:00:00',
'Task_Due_Date': '2013-04-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 36,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 7,
'Task_Subject': 'Review Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-06T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 37,
'Task_Assigned_Employee_ID': 41,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 38,
'Task_Assigned_Employee_ID': 42,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 39,
'Task_Assigned_Employee_ID': 45,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Deferred',
'Task_Priority': 3,
'Task_Completion': 25,
}, {
'Task_ID': 40,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 11,
'Task_Subject': 'Provide New Health Insurance Docs',
'Task_Start_Date': '2013-03-28T00:00:00',
'Task_Due_Date': '2013-04-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 41,
'Task_Assigned_Employee_ID': 10,
'Task_Owner_ID': 11,
'Task_Subject': 'Review Changes to Health Insurance Coverage',
'Task_Start_Date': '2013-04-07T00:00:00',
'Task_Due_Date': '2013-04-30T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 42,
'Task_Assigned_Employee_ID': 14,
'Task_Owner_ID': 10,
'Task_Subject': 'Scan Health Insurance Forms',
'Task_Start_Date': '2013-04-15T00:00:00',
'Task_Due_Date': '2013-04-20T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 43,
'Task_Assigned_Employee_ID': 15,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 44,
'Task_Assigned_Employee_ID': 13,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 45,
'Task_Assigned_Employee_ID': 16,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Deferred',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 46,
'Task_Assigned_Employee_ID': 18,
'Task_Owner_ID': 9,
'Task_Subject': 'Follow up with West Coast Stores',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2014-02-04T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 95,
}, {
'Task_ID': 47,
'Task_Assigned_Employee_ID': 17,
'Task_Owner_ID': 9,
'Task_Subject': 'Follow up with East Coast Stores',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2014-01-04T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 85,
}, {
'Task_ID': 48,
'Task_Assigned_Employee_ID': 19,
'Task_Owner_ID': 9,
'Task_Subject': 'Send Email to Customers about Recall',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2013-04-30T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 49,
'Task_Assigned_Employee_ID': 9,
'Task_Owner_ID': 7,
'Task_Subject': 'Submit Refund Report for 2013 Recall',
'Task_Start_Date': '2013-04-25T00:00:00',
'Task_Due_Date': '2013-05-05T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 50,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 7,
'Task_Subject': 'Give Final Approval for Refunds',
'Task_Start_Date': '2013-05-05T00:00:00',
'Task_Due_Date': '2013-05-15T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}];
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>
Numeric, date, and Boolean values match if they are equal to the search query. String values match if they contain the query. Search for string values is case-insensitive.
To specify a search query in code, set the searchPanel.text property or call the searchByText(text) method.