Overview
DevExtreme Vue Data Grid is a a client-side grid component that includes all the features needed for use in a modern business application: powerful data binding, editing, and validation capabilities, versatile searching and filtering, flexible layout, and many more. You can use Vue syntax and techniques to instantiate and configure the Data Grid or handle its events. In addition, the Data Grid supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components.
To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: Getting Started with DataGrid.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<DxDataGrid
:data-source="dataSource"
:remote-operations="false"
:allow-column-reordering="true"
:row-alternation-enabled="true"
:show-borders="true"
@content-ready="onContentReady"
>
<DxColumn
:group-index="0"
data-field="Product"
/>
<DxColumn
data-field="Amount"
caption="Sale Amount"
data-type="number"
format="currency"
alignment="right"
/>
<DxColumn
:allow-grouping="false"
data-field="Discount"
caption="Discount %"
data-type="number"
format="percent"
alignment="right"
cell-template="discountCellTemplate"
css-class="bullet"
/>
<DxColumn
data-field="SaleDate"
data-type="date"
/>
<DxColumn
data-field="Region"
data-type="string"
/>
<DxColumn
data-field="Sector"
data-type="string"
/>
<DxColumn
data-field="Channel"
data-type="string"
/>
<DxColumn
:width="150"
data-field="Customer"
data-type="string"
/>
<DxGroupPanel :visible="true"/>
<DxSearchPanel
:visible="true"
:highlight-case-sensitive="true"
/>
<DxGrouping :auto-expand-all="false"/>
<DxPager
:allowed-page-sizes="pageSizes"
:show-page-size-selector="true"
/>
<DxPaging :page-size="10"/>
<template #discountCellTemplate="{ data: cellData }">
<DiscountCell :cell-data="cellData"/>
</template>
</DxDataGrid>
</template>
<script>
import {
DxDataGrid,
DxColumn,
DxGrouping,
DxGroupPanel,
DxPager,
DxPaging,
DxSearchPanel,
} from 'devextreme-vue/data-grid';
import DataSource from 'devextreme/data/data_source';
import 'devextreme/data/odata/store';
import DiscountCell from './DiscountCell.vue';
let collapsed = false;
export default {
components: {
DxDataGrid,
DxColumn,
DxGrouping,
DxGroupPanel,
DxPager,
DxPaging,
DxSearchPanel,
DiscountCell,
},
data() {
return {
dataSource: new DataSource({
store: {
type: 'odata',
url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
key: 'Id',
beforeSend(request) {
const year = new Date().getFullYear() - 1;
request.params.startDate = `${year}-05-10`;
request.params.endDate = `${year}-5-15`;
},
},
}),
pageSizes: [10, 25, 50, 100],
onContentReady(e) {
if (!collapsed) {
e.component.expandRow(['EnviroCare']);
collapsed = true;
}
},
};
},
};
</script>
<template>
<DxBullet
:show-target="false"
:show-zero-level="true"
:value="cellData.value * 100"
:start-scale-value="0"
:end-scale-value="100"
>
<DxSize
:width="150"
:height="35"
/>
<DxMargin
:top="5"
:bottom="0"
:left="5"
/>
<DxTooltip
:enabled="true"
:padding-top-bottom="2"
:z-index="5"
:customize-tooltip="customizeTooltip"
>
<DxFont :size="18"/>
</DxTooltip>
</DxBullet>
</template>
<script>
import {
DxBullet,
DxFont,
DxMargin,
DxSize,
DxTooltip,
} from 'devextreme-vue/bullet';
export default {
components: {
DxBullet,
DxFont,
DxMargin,
DxSize,
DxTooltip,
},
props: {
cellData: {
type: Object,
default: () => {},
},
},
data() {
return {
customizeTooltip(data) {
return {
text: `${parseInt(data.value, 10)}%`,
};
},
};
},
};
</script>
<style>
.dx-datagrid .dx-data-row > td.bullet {
padding-top: 0;
padding-bottom: 0;
}
</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/22.2.6/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/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>
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.47/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.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.2.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.72/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/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',
'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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.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',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);