React Data Grid - Simple Array

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

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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';import { customers } from './data.ts';​const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];​const App = () => (  <DataGrid    dataSource={customers}    keyExpr="ID"    defaultColumns={columns}    showBorders={true}  >    { columns.map((column, index) => <Column dataField={column} key={index} />) }  </DataGrid>);​export default App;​

xxxxxxxxxx
 
import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';import { customers } from './data.js';​const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];const App = () => (  <DataGrid    dataSource={customers}    keyExpr="ID"    defaultColumns={columns}    showBorders={true}  >    {columns.map((column, index) => (      <Column        dataField={column}        key={index}      />    ))}  </DataGrid>);export default App;​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
export const customers = [{
  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',}, {  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',}, {  ID: 3,  CompanyName: 'K&S Music',  Address: '1000 Nicllet Mall',  City: 'Minneapolis',  State: 'Minnesota',  Zipcode: 55403,  Phone: '(612) 304-6073',  Fax: '(612) 304-6074',}, {  ID: 4,  CompanyName: "Tom's Club",  Address: '999 Lake Drive',  City: 'Issaquah',  State: 'Washington',  Zipcode: 98027,  Phone: '(800) 955-2292',  Fax: '(800) 955-2293',}, {  ID: 5,  CompanyName: 'E-Mart',  Address: '3333 Beverly Rd',  City: 'Hoffman Estates',  State: 'Illinois',  Zipcode: 60179,  Phone: '(847) 286-2500',  Fax: '(847) 286-2501',}, {  ID: 6,  CompanyName: 'Walters',  Address: '200 Wilmot Rd',  City: 'Deerfield',  State: 'Illinois',  Zipcode: 60015,  Phone: '(847) 940-2500',  Fax: '(847) 940-2501',}, {  ID: 7,  CompanyName: 'StereoShack',  Address: '400 Commerce S',  City: 'Fort Worth',  State: 'Texas',  Zipcode: 76102,  Phone: '(817) 820-0741',  Fax: '(817) 820-0742',}, {  ID: 8,  CompanyName: 'Circuit Town',  Address: '2200 Kensington Court',  City: 'Oak Brook',  State: 'Illinois',  Zipcode: 60523,  Phone: '(800) 955-2929',  Fax: '(800) 955-9392',}, {  ID: 9,  CompanyName: 'Premier Buy',  Address: '7601 Penn Avenue South',  City: 'Richfield',  State: 'Minnesota',  Zipcode: 55423,  Phone: '(612) 291-1000',  Fax: '(612) 291-2001',}, {  ID: 10,  CompanyName: 'ElectrixMax',  Address: '263 Shuman Blvd',  City: 'Naperville',  State: 'Illinois',  Zipcode: 60563,  Phone: '(630) 438-7800',  Fax: '(630) 438-7801',}, {  ID: 11,  CompanyName: 'Video Emporium',  Address: '1201 Elm Street',  City: 'Dallas',  State: 'Texas',  Zipcode: 75270,  Phone: '(214) 854-3000',  Fax: '(214) 854-3001',}, {  ID: 12,  CompanyName: 'Screen Shop',  Address: '1000 Lowes Blvd',  City: 'Mooresville',  State: 'North Carolina',  Zipcode: 28117,  Phone: '(800) 445-6937',  Fax: '(800) 445-6938',}];​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    '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',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
export const customers = [
  {    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',  },  {    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',  },  {    ID: 3,    CompanyName: 'K&S Music',    Address: '1000 Nicllet Mall',    City: 'Minneapolis',    State: 'Minnesota',    Zipcode: 55403,    Phone: '(612) 304-6073',    Fax: '(612) 304-6074',  },  {    ID: 4,    CompanyName: "Tom's Club",    Address: '999 Lake Drive',    City: 'Issaquah',    State: 'Washington',    Zipcode: 98027,    Phone: '(800) 955-2292',    Fax: '(800) 955-2293',  },  {    ID: 5,    CompanyName: 'E-Mart',    Address: '3333 Beverly Rd',    City: 'Hoffman Estates',    State: 'Illinois',    Zipcode: 60179,    Phone: '(847) 286-2500',    Fax: '(847) 286-2501',  },  {    ID: 6,    CompanyName: 'Walters',    Address: '200 Wilmot Rd',    City: 'Deerfield',    State: 'Illinois',    Zipcode: 60015,    Phone: '(847) 940-2500',    Fax: '(847) 940-2501',  },  {    ID: 7,    CompanyName: 'StereoShack',    Address: '400 Commerce S',    City: 'Fort Worth',    State: 'Texas',    Zipcode: 76102,    Phone: '(817) 820-0741',    Fax: '(817) 820-0742',  },  {    ID: 8,    CompanyName: 'Circuit Town',    Address: '2200 Kensington Court',    City: 'Oak Brook',    State: 'Illinois',    Zipcode: 60523,    Phone: '(800) 955-2929',    Fax: '(800) 955-9392',  },  {    ID: 9,    CompanyName: 'Premier Buy',    Address: '7601 Penn Avenue South',    City: 'Richfield',    State: 'Minnesota',    Zipcode: 55423,    Phone: '(612) 291-1000',    Fax: '(612) 291-2001',  },  {    ID: 10,    CompanyName: 'ElectrixMax',    Address: '263 Shuman Blvd',    City: 'Naperville',    State: 'Illinois',    Zipcode: 60563,    Phone: '(630) 438-7800',    Fax: '(630) 438-7801',  },  {    ID: 11,    CompanyName: 'Video Emporium',    Address: '1201 Elm Street',    City: 'Dallas',    State: 'Texas',    Zipcode: 75270,    Phone: '(214) 854-3000',    Fax: '(214) 854-3001',  },  {    ID: 12,    CompanyName: 'Screen Shop',    Address: '1000 Lowes Blvd',    City: 'Mooresville',    State: 'North Carolina',    Zipcode: 28117,    Phone: '(800) 445-6937',    Fax: '(800) 445-6938',  },];​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx