Vue Data Grid - 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.

For a complete overview of DataGrid options, check the DataGrid API Reference.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the DataGrid features used.

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 :visible="true" :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, type DxDataGridTypes, } from 'devextreme-vue/data-grid'; import { DataSource } from 'devextreme-vue/common/data'; 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 { type 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>

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.5/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> </div> </body> </html>