Simple Array
Documentation
In this example, the DataGrid widget displays data stored in an in-memory array. Pass the required array directly to the dataSource option to bind it to the DataGrid.
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';
class App extends React.Component {
render() {
return (
<DataGrid
dataSource={customers}
columns={['CompanyName', 'City', 'State', 'Phone', 'Fax']}
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/19.1.3/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.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>
<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'
}];
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16/umd/react.development.js',
'react-dom': 'npm:react-dom@16/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'devextreme': 'npm:devextreme@19.1',
'devextreme-react': 'npm:devextreme-react@19.1',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});