Your search did not match any results.
Data Grid

Simple Array

You can use the DataGrid widget to display and edit data from an array of objects. Use the dataSource and keyExpr options to specify the bound array and its key field. For more information, refer to the following help topic: Local Array.

Use the columns option to specify a list of data fields you want to display within the DataGrid as columns. If the columns option is not specified, the widget creates columns for all data fields available in objects from the bound array.

Copy to CodeSandBox
Apply
Reset
<dx-data-grid id="gridContainer" [dataSource]="customers" [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']" [showBorders]="true"> </dx-data-grid>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule } from 'devextreme-angular'; import { Customer, Service } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ styleUrls: ['app/app.component.css'], selector: 'demo-app', templateUrl: 'app/app.component.html', providers: [Service] }) export class AppComponent { customers: Customer[]; constructor(service: Service) { this.customers = service.getCustomers(); } } @NgModule({ imports: [ BrowserModule, DxDataGridModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
import { Injectable } from '@angular/core'; export class Customer { ID: number; CompanyName: string; Address: string; City: string; State: string; Zipcode: number; Phone: string; Fax: string; Website: string; } let customers: Customer[] = [{ "ID": 1, "CompanyName": "Super Mart of the West", "Address": "702 SW 8th Street", "City": "Bentonville", "State": "Arkansas", "Zipcode": 72716, "Phone": "(800) 555-2797", "Fax": "(800) 555-2171", "Website": "http://www.nowebsitesupermart.com" }, { "ID": 2, "CompanyName": "Electronics Depot", "Address": "2455 Paces Ferry Road NW", "City": "Atlanta", "State": "Georgia", "Zipcode": 30339, "Phone": "(800) 595-3232", "Fax": "(800) 595-3231", "Website": "http://www.nowebsitedepot.com" }, { "ID": 3, "CompanyName": "K&S Music", "Address": "1000 Nicllet Mall", "City": "Minneapolis", "State": "Minnesota", "Zipcode": 55403, "Phone": "(612) 304-6073", "Fax": "(612) 304-6074", "Website": "http://www.nowebsitemusic.com" }, { "ID": 4, "CompanyName": "Tom's Club", "Address": "999 Lake Drive", "City": "Issaquah", "State": "Washington", "Zipcode": 98027, "Phone": "(800) 955-2292", "Fax": "(800) 955-2293", "Website": "http://www.nowebsitetomsclub.com" }, { "ID": 5, "CompanyName": "E-Mart", "Address": "3333 Beverly Rd", "City": "Hoffman Estates", "State": "Illinois", "Zipcode": 60179, "Phone": "(847) 286-2500", "Fax": "(847) 286-2501", "Website": "http://www.nowebsiteemart.com" }, { "ID": 6, "CompanyName": "Walters", "Address": "200 Wilmot Rd", "City": "Deerfield", "State": "Illinois", "Zipcode": 60015, "Phone": "(847) 940-2500", "Fax": "(847) 940-2501", "Website": "http://www.nowebsitewalters.com" }, { "ID": 7, "CompanyName": "StereoShack", "Address": "400 Commerce S", "City": "Fort Worth", "State": "Texas", "Zipcode": 76102, "Phone": "(817) 820-0741", "Fax": "(817) 820-0742", "Website": "http://www.nowebsiteshack.com" }, { "ID": 8, "CompanyName": "Circuit Town", "Address": "2200 Kensington Court", "City": "Oak Brook", "State": "Illinois", "Zipcode": 60523, "Phone": "(800) 955-2929", "Fax": "(800) 955-9392", "Website": "http://www.nowebsitecircuittown.com" }, { "ID": 9, "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": 10, "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": 11, "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": 12, "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" }]; @Injectable() export class Service { getCustomers() { return customers; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', 'devextreme': 'npm:devextreme@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.17', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.10', 'devextreme-angular': 'npm:devextreme-angular@20.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@20.1/*/package.json", "npm:devextreme-angular@20.1/ui/*/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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.1.8/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>