Your search did not match any results.
Data Grid

JSON Data

If your data is stored in JSON format, the DataGrid does not require making a request for data manually. You can simply assign the URL of your JSON data storage to the dataSource property, and the DataGrid will fetch the data and display it.

Backend API
Copy to CodeSandBox
Apply
Reset
<template> <DxDataGrid :columns="columns" :show-borders="true" data-source="../../../../data/customers.json" /> </template> <script> import DxDataGrid from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid }, data() { return { columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax'] }; } }; </script>
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/21.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/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>
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.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.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@21.1.5', 'jszip': 'npm:jszip@3.7.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.3.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.25/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.4/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.8/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' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", ], babelOptions: { sourceMaps: false, stage0: true } }; System.config(window.config);
[{ "ID": 1, "CompanyName": "Premier Buy", "Address": "7601 Penn Avenue South", "City": "Richfield", "State": "Minnesota", "Zipcode": 55423, "Phone": "(612) 291-1000", "Fax": "(612) 291-2001", "Website": "http://www.nowebsitepremierbuy.com" }, { "ID": 2, "CompanyName": "ElectrixMax", "Address": "263 Shuman Blvd", "City": "Naperville", "State": "Illinois", "Zipcode": 60563, "Phone": "(630) 438-7800", "Fax": "(630) 438-7801", "Website": "http://www.nowebsiteelectrixmax.com" }, { "ID": 3, "CompanyName": "Video Emporium", "Address": "1201 Elm Street", "City": "Dallas", "State": "Texas", "Zipcode": 75270, "Phone": "(214) 854-3000", "Fax": "(214) 854-3001", "Website": "http://www.nowebsitevideoemporium.com" }, { "ID": 4, "CompanyName": "Screen Shop", "Address": "1000 Lowes Blvd", "City": "Mooresville", "State": "North Carolina", "Zipcode": 28117, "Phone": "(800) 445-6937", "Fax": "(800) 445-6938", "Website": "http://www.nowebsitescreenshop.com" }, { "ID": 5, "CompanyName": "Braeburn", "Address": "1 Infinite Loop", "City": "Cupertino", "State": "California", "Zipcode": 95014, "Phone": "(408) 996-1010", "Fax": "(408) 996-1012", "Website": "http://www.nowebsitebraeburn.com" }, { "ID": 6, "CompanyName": "PriceCo", "Address": "30 Hunter Lane", "City": "Camp Hill", "State": "Pennsylvania", "Zipcode": 17011, "Phone": "(717) 761-2633", "Fax": "(717) 761-2334", "Website": "http://www.nowebsitepriceco.com" }, { "ID": 7, "CompanyName": "Ultimate Gadget", "Address": "1557 Watson Blvd", "City": "Warner Robbins", "State": "Georgia", "Zipcode": 31093, "Phone": "(995) 623-6785", "Fax": "(995) 623-6786", "Website": "http://www.nowebsiteultimategadget.com" }, { "ID": 8, "CompanyName": "EZ Stop", "Address": "618 Michillinda Ave.", "City": "Arcadia", "State": "California", "Zipcode": 91007, "Phone": "(626) 265-8632", "Fax": "(626) 265-8633", "Website": "http://www.nowebsiteezstop.com" }, { "ID": 9, "CompanyName": "Clicker", "Address": "1100 W. Artesia Blvd.", "City": "Compton", "State": "California", "Zipcode": 90220, "Phone": "(310) 884-9000", "Fax": "(310) 884-9001", "Website": "http://www.nowebsiteclicker.com" }, { "ID": 10, "CompanyName": "Store of America", "Address": "2401 Utah Ave. South", "City": "Seattle", "State": "Washington", "Zipcode": 98134, "Phone": "(206) 447-1575", "Fax": "(206) 447-1576", "Website": "http://www.nowebsiteamerica.com" }, { "ID": 11, "CompanyName": "Zone Toys", "Address": "1945 S Cienega Boulevard", "City": "Los Angeles", "State": "California", "Zipcode": 90034, "Phone": "(310) 237-5642", "Fax": "(310) 237-5643", "Website": "http://www.nowebsitezonetoys.com" }, { "ID": 12, "CompanyName": "ACME", "Address": "2525 E El Segundo Blvd", "City": "El Segundo", "State": "California", "Zipcode": 90245, "Phone": "(310) 536-0611", "Fax": "(310) 536-0612", "Website": "http://www.nowebsiteacme.com" }]