<template>
<div>
<DxDataGrid
:ref="dataGridRefName"
:data-source="employees"
:show-borders="true"
>
<DxColumn
:width="70"
data-field="Prefix"
caption="Title"
/>
<DxColumn
data-field="FirstName"
sort-order="asc"
/>
<DxColumn
data-field="LastName"
sort-order="asc"
/>
<DxColumn data-field="City"/>
<DxColumn data-field="State"/>
<DxColumn
:width="130"
:allow-sorting="!positionDisableSorting"
data-field="Position"
/>
<DxColumn
data-field="HireDate"
data-type="date"
/>
<DxSorting mode="multiple"/>
</DxDataGrid>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<DxCheckBox
v-model:value="positionDisableSorting"
text="Disable Sorting for the Position Column"
@value-changed="onValueChanged"
/>
</div>
</div>
</div>
</template>
<script>
import {
DxColumn,
DxDataGrid,
DxSorting
} from 'devextreme-vue/data-grid';
import DxCheckBox from 'devextreme-vue/check-box';
import { employees } from './data.js';
export default {
components: {
DxCheckBox,
DxColumn,
DxDataGrid,
DxSorting
},
data() {
return {
positionDisableSorting: false,
dataGridRefName: 'dataGrid',
employees
};
},
methods: {
onValueChanged() {
const dataGrid = this.$refs[this.dataGridRefName].instance;
dataGrid.columnOption(5, 'sortOrder', void 0);
}
}
};
</script>
<style scoped>
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#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/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/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>
export const employees = [{
'ID' : 1,
'FirstName' : 'John',
'LastName' : 'Heart',
'Phone' : '(213) 555-9392',
'Prefix' : 'Mr.',
'Position' : 'CEO',
'BirthDate' : '1964-03-16',
'HireDate' : '1995-01-15',
'Email' : 'jheart@dx-email.com',
'Address' : '351 S Hill St.',
'City' : 'Los Angeles',
'StateID' : 5,
'State' : 'California',
'HomePhone' : '(213) 555-9208',
'Skype' : 'jheartDXskype'
}, {
'ID' : 2,
'FirstName' : 'Olivia',
'LastName' : 'Peyton',
'Phone' : '(310) 555-2728',
'Prefix' : 'Mrs.',
'Position' : 'Sales Assistant',
'BirthDate' : '1981-06-03',
'HireDate' : '2012-05-14',
'Email' : 'oliviap@dx-email.com',
'Address' : '807 W Paseo Del Mar',
'City' : 'Los Angeles',
'StateID' : 5,
'State' : 'California',
'HomePhone' : '(310) 555-4547',
'Skype' : 'oliviapDXskype'
}, {
'ID' : 3,
'FirstName' : 'Robert',
'LastName' : 'Reagan',
'Phone' : '(818) 555-2387',
'Prefix' : 'Mr.',
'Position' : 'CMO',
'BirthDate' : '1974-09-07',
'HireDate' : '2002-11-08',
'Email' : 'robertr@dx-email.com',
'Address' : '4 Westmoreland Pl.',
'City' : 'Bentonville',
'StateID' : 4,
'State' : 'Arkansas',
'HomePhone' : '(818) 555-2438',
'Skype' : 'robertrDXskype'
}, {
'ID' : 4,
'FirstName' : 'Greta',
'LastName' : 'Sims',
'Phone' : '(818) 555-6546',
'Prefix' : 'Ms.',
'Position' : 'HR Manager',
'BirthDate' : '1977-11-22',
'HireDate' : '1998-04-23',
'Email' : 'gretas@dx-email.com',
'Address' : '1700 S Grandview Dr.',
'City' : 'Atlanta',
'StateID' : 11,
'State' : 'Georgia',
'HomePhone' : '(818) 555-0976',
'Skype' : 'gretasDXskype'
}, {
'ID' : 5,
'FirstName' : 'Brett',
'LastName' : 'Wade',
'Phone' : '(626) 555-0358',
'Prefix' : 'Mr.',
'Position' : 'IT Manager',
'BirthDate' : '1968-12-01',
'HireDate' : '2009-03-06',
'Email' : 'brettw@dx-email.com',
'Address' : '1120 Old Mill Rd.',
'City' : 'Boise',
'StateID' : 13,
'State' : 'Idaho',
'HomePhone' : '(626) 555-5985',
'Skype' : 'brettwDXskype'
}, {
'ID' : 6,
'FirstName' : 'Sandra',
'LastName' : 'Johnson',
'Phone' : '(562) 555-2082',
'Prefix' : 'Mrs.',
'Position' : 'Controller',
'BirthDate' : '1974-11-15',
'HireDate' : '2005-05-11',
'Email' : 'sandraj@dx-email.com',
'Address' : '4600 N Virginia Rd.',
'City' : 'Beaver',
'StateID' : 44,
'State' : 'Utah',
'HomePhone' : '(562) 555-8272',
'Skype' : 'sandrajDXskype'
}, {
'ID' : 7,
'FirstName' : 'Kevin',
'LastName' : 'Carter',
'Phone' : '(213) 555-2840',
'Prefix' : 'Mr.',
'Position' : 'Shipping Manager',
'BirthDate' : '1978-01-09',
'HireDate' : '2009-08-11',
'Email' : 'kevinc@dx-email.com',
'Address' : '424 N Main St.',
'City' : 'San Diego',
'StateID' : 5,
'State' : 'California',
'HomePhone' : '(213) 555-8038',
'Skype' : 'kevincDXskype'
}, {
'ID' : 8,
'FirstName' : 'Cynthia',
'LastName' : 'Stanwick',
'Phone' : '(818) 555-6655',
'Prefix' : 'Ms.',
'Position' : 'HR Assistant',
'BirthDate' : '1985-06-05',
'HireDate' : '2008-03-24',
'Email' : 'cindys@dx-email.com',
'Address' : '2211 Bonita Dr.',
'City' : 'Little Rock',
'StateID' : 4,
'State' : 'Arkansas',
'HomePhone' : '(818) 555-6808',
'Skype' : 'cindysDXskype'
}, {
'ID' : 9,
'FirstName' : 'Kent',
'LastName' : 'Samuelson',
'Phone' : '(562) 555-9282',
'Prefix' : 'Dr.',
'Position' : 'Ombudsman',
'BirthDate' : '1972-09-11',
'HireDate' : '2009-04-22',
'Email' : 'kents@dx-email.com',
'Address' : '12100 Mora Dr',
'City' : 'St. Louis',
'StateID' : 26,
'State' : 'Missouri',
'HomePhone' : '(562) 555-1328',
'Skype' : 'kentsDXskype'
}, {
'ID' : 10,
'FirstName' : 'Taylor',
'LastName' : 'Riley',
'Phone' : '(310) 555-7276',
'Prefix' : 'Mr.',
'Position' : 'Network Admin',
'BirthDate' : '1982-08-14',
'HireDate' : '2012-04-14',
'Email' : 'taylorr@dx-email.com',
'Address' : '7776 Torreyson Dr',
'City' : 'San Jose',
'StateID' : 5,
'State' : 'California',
'HomePhone' : '(310) 555-9712',
'Skype' : 'taylorrDXskype'
}];
System.config({
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.6',
'devextreme-vue': 'npm:devextreme-vue@20.2.6',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.18/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.24/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.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'
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});