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.
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!
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}
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/19.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.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'
}];
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
}
});