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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import DataGrid from 'devextreme-react/data-grid';
import { customers } from './data.js';
const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
class App extends React.Component {
render() {
return (
<DataGrid
dataSource={customers}
keyExpr="ID"
defaultColumns={columns}
showBorders={true}
/>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('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/22.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.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>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
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',
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',
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'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@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/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@22.1.5/cjs',
'devextreme-react': 'npm:devextreme-react@22.1.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.63/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.32/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// 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.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);