Your search did not match any results.
Data Grid

Columns based on a Data Source

To use data source object fields to automatically generate columns, pass an array of objects to the dataSource option and specify the keyExpr - as shown in this example.

Copy to CodeSandBox
Apply
Reset
<template> <DxDataGrid id="grid" :data-source="dataSource" :show-borders="true" /> </template> <script> import DxDataGrid from 'devextreme-vue/data-grid'; import { orders } from './data.js'; export default { components: { DxDataGrid }, data() { return { dataSource: orders }; } }; </script> <style> #grid{ height: 440px; } </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.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.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"/> </div> </body> </html>
export const orders = [{ 'OrderNumber': 35703, 'SaleAmount': 11800, 'StoreCity': 'Los Angeles', 'StoreState': 'California', 'Employee': 'Harv Mudd', 'OrderDate': '2014/04/10' }, { 'OrderNumber': 35711, 'OrderDate': '2014/01/12', 'SaleAmount': 16050, 'StoreState': 'California', 'StoreCity': 'San Jose', 'Employee': 'Jim Packard' }, { 'OrderNumber': 35714, 'OrderDate': '2014/01/22', 'SaleAmount': 14750, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 35983, 'OrderDate': '2014/02/07', 'SaleAmount': 3725, 'StoreState': 'Colorado', 'StoreCity': 'Denver', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 36987, 'OrderDate': '2014/03/11', 'SaleAmount': 14200, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 38466, 'OrderDate': '2014/03/01', 'SaleAmount': 7800, 'StoreState': 'California', 'StoreCity': 'Los Angeles', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 39420, 'OrderDate': '2014/02/15', 'SaleAmount': 20500, 'StoreState': 'California', 'StoreCity': 'San Jose', 'Employee': 'Jim Packard' }, { 'OrderNumber': 39874, 'OrderDate': '2014/02/04', 'SaleAmount': 9050, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 42847, 'OrderDate': '2014/02/15', 'SaleAmount': 20400, 'StoreState': 'Wyoming', 'StoreCity': 'Casper', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 43982, 'OrderDate': '2014/05/29', 'SaleAmount': 6050, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 56272, 'OrderDate': '2014/05/16', 'SaleAmount': 15850, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 57429, 'OrderDate': '2014/04/11', 'SaleAmount': 11050, 'StoreState': 'Arizona', 'StoreCity': 'Phoenix', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 58292, 'OrderDate': '2014/04/05', 'SaleAmount': 13500, 'StoreState': 'California', 'StoreCity': 'Los Angeles', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 62427, 'OrderDate': '2014/05/17', 'SaleAmount': 23500, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 65977, 'OrderDate': '2014/02/13', 'SaleAmount': 2550, 'StoreState': 'Wyoming', 'StoreCity': 'Casper', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 66947, 'OrderDate': '2014/01/06', 'SaleAmount': 3500, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 68428, 'OrderDate': '2014/03/13', 'SaleAmount': 10500, 'StoreState': 'California', 'StoreCity': 'Los Angeles', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 69477, 'OrderDate': '2014/01/22', 'SaleAmount': 14200, 'StoreState': 'California', 'StoreCity': 'Anaheim', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 72947, 'OrderDate': '2014/03/05', 'SaleAmount': 13350, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 73088, 'OrderDate': '2014/01/21', 'SaleAmount': 8600, 'StoreState': 'Nevada', 'StoreCity': 'Reno', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 76927, 'OrderDate': '2014/04/04', 'SaleAmount': 9800, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 77297, 'OrderDate': '2014/01/07', 'SaleAmount': 10850, 'StoreState': 'Arizona', 'StoreCity': 'Phoenix', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 84744, 'OrderDate': '2014/05/20', 'SaleAmount': 4650, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 85028, 'OrderDate': '2014/02/08', 'SaleAmount': 2575, 'StoreState': 'Nevada', 'StoreCity': 'Reno', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 87297, 'OrderDate': '2014/04/08', 'SaleAmount': 14200, 'StoreState': 'Wyoming', 'StoreCity': 'Casper', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 88027, 'OrderDate': '2014/05/18', 'SaleAmount': 13650, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 94726, 'OrderDate': '2014/02/23', 'SaleAmount': 20500, 'StoreState': 'California', 'StoreCity': 'San Jose', 'Employee': 'Jim Packard' }, { 'OrderNumber': 95266, 'OrderDate': '2014/03/18', 'SaleAmount': 9050, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 98477, 'OrderDate': '2014/05/08', 'SaleAmount': 23500, 'StoreState': 'Wyoming', 'StoreCity': 'Casper', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 99247, 'OrderDate': '2014/02/27', 'SaleAmount': 2100, 'StoreState': 'Utah', 'StoreCity': 'Salt Lake City', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 174884, 'OrderDate': '2014/03/03', 'SaleAmount': 7200, 'StoreState': 'Colorado', 'StoreCity': 'Denver', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 188877, 'OrderDate': '2014/02/14', 'SaleAmount': 8750, 'StoreState': 'Arizona', 'StoreCity': 'Phoenix', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 191883, 'OrderDate': '2014/02/28', 'SaleAmount': 9900, 'StoreState': 'California', 'StoreCity': 'Los Angeles', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 192474, 'OrderDate': '2014/02/18', 'SaleAmount': 12800, 'StoreState': 'California', 'StoreCity': 'Anaheim', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 193847, 'OrderDate': '2014/05/06', 'SaleAmount': 14100, 'StoreState': 'California', 'StoreCity': 'San Diego', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 194877, 'OrderDate': '2014/03/17', 'SaleAmount': 4750, 'StoreState': 'California', 'StoreCity': 'San Jose', 'Employee': 'Jim Packard' }, { 'OrderNumber': 195746, 'OrderDate': '2014/02/04', 'SaleAmount': 9050, 'StoreState': 'Nevada', 'StoreCity': 'Las Vegas', 'Employee': 'Harv Mudd' }, { 'OrderNumber': 197474, 'OrderDate': '2014/01/17', 'SaleAmount': 6400, 'StoreState': 'Nevada', 'StoreCity': 'Reno', 'Employee': 'Clark Morgan' }, { 'OrderNumber': 198746, 'OrderDate': '2014/02/04', 'SaleAmount': 15700, 'StoreState': 'Colorado', 'StoreCity': 'Denver', 'Employee': 'Todd Hoffman' }, { 'OrderNumber': 214222, 'OrderDate': '2014/02/03', 'SaleAmount': 11050, 'StoreState': 'Arizona', 'StoreCity': 'Phoenix', 'Employee': 'Clark Morgan' }];
System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, 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.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.3', 'devextreme-vue': 'npm:devextreme-vue@20.2.3', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.0/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.0/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.5/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.5/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 } });