DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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.

Backend API
<template> <DxDataGrid :data-source="dataSource" :remote-operations="false" :allow-column-reordering="true" :row-alternation-enabled="true" :show-borders="true" :width="'100%'" @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 setup lang="ts"> import { DxDataGrid, DxColumn, DxGrouping, DxGroupPanel, DxPager, DxPaging, DxSearchPanel, DxDataGridTypes, } from 'devextreme-vue/data-grid'; import DataSource from 'devextreme/data/data_source'; import 'devextreme/data/odata/store'; import DiscountCell from './DiscountCell.vue'; const dataSource = new DataSource({ store: { type: 'odata', version: 2, 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`; }, }, }); const pageSizes = [10, 25, 50, 100]; let collapsed = false; const onContentReady = (e: DxDataGridTypes.ContentReadyEvent) => { 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 setup lang="ts"> import { DxBullet, DxFont, DxMargin, DxSize, DxTooltip, } from 'devextreme-vue/bullet'; import { DxDataGridTypes } from 'devextreme-vue/data-grid'; defineProps<{ cellData: DxDataGridTypes.ColumnCellTemplateData }>(); const customizeTooltip = (data: { value: string }) => ({ text: `${parseInt(data.value, 10)}%`, }); </script> <style> .dx-datagrid .dx-data-row > td.bullet { padding-top: 0; padding-bottom: 0; } </style>
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, }, }, paths: { 'root:': '../../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', '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.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
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/23.2.5/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.2.4/lib/typescript.js"></script> <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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>