Your search did not match any results.
DataGrid

Overview

DevExtreme HTML5 JavaScript Data Grid is a powerful table component that can be used in a Vue app. It includes all the features you expect to find in a modern grid component: 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 on GitHub.

Copy to CodeSandBox
Apply
Reset
<template> <dx-data-grid :data-source="dataSource" :remote-operations="false" :allow-column-reordering="true" :row-alternation-enabled="true" :show-borders="true" @content-ready="onContentReady" > <dx-column :group-index="0" data-field="Product" /> <dx-column data-field="Amount" caption="Sale Amount" data-type="number" format="currency" alignment="right" /> <dx-column :allow-grouping="false" data-field="Discount" caption="Discount %" data-type="number" format="percent" alignment="right" cell-template="discountCellTemplate" css-class="bullet" /> <dx-column data-field="SaleDate" data-type="date" /> <dx-column data-field="Region" data-type="string" /> <dx-column data-field="Sector" data-type="string" /> <dx-column data-field="Channel" data-type="string" /> <dx-column :width="150" data-field="Customer" data-type="string" /> <dx-group-panel :visible="true"/> <dx-search-panel :visible="true" :highlight-case-sensitive="true" /> <dx-grouping :auto-expand-all="false"/> <dx-selection mode="multiple"/> <dx-pager :allowed-page-sizes="pageSizes" :show-page-size-selector="true" /> <dx-paging :page-size="10"/> <div slot="discountCellTemplate" slot-scope="cellData" > <discount-cell :cell-data="cellData"/> </div> </dx-data-grid> </template> <script> import { DxDataGrid, DxColumn, DxGrouping, DxGroupPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } 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, DxSelection, DiscountCell }, data() { return { dataSource: new DataSource({ store: { type: 'odata', url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes', beforeSend: function(request) { request.params.startDate = '2018-05-10'; request.params.endDate = '2018-05-15'; } } }), pageSizes: [5, 10, 20], onContentReady: function(e) { if (!collapsed) { e.component.expandRow(['EnviroCare']); collapsed = true; } } }; } }; </script>
<template> <dx-bullet :show-target="false" :show-zero-level="true" :value="cellData.value * 100" :start-scale-value="0" :end-scale-value="100" > <dx-size :width="150" :height="35" /> <dx-margin :top="5" :bottom="0" :left="5" /> <dx-tooltip :enabled="true" :padding-top-bottom="2" :z-index="5" :customize-tooltip="customizeTooltip" > <dx-font :size="18"/> </dx-tooltip> </dx-bullet> </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: function(data) { return { text: `${parseInt(data.value)}%` }; } }; } }; </script> <style> .dx-datagrid .dx-data-row > td.bullet { padding-top: 0; padding-bottom: 0; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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/18.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.3/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"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@18.2', 'devextreme-vue': 'npm:devextreme-vue@18.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'quill-delta-to-html': 'npm:quill-delta-to-html@0.10.4/dist/browser/QuillDeltaToHtmlConverter.bundle.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });