Export CSV (React)

This example shows how to export grid rows as a CSV file

This example uses React.

This example shows how to export grid rows as CSV file: You just need to import "@grapecity/csvexport" module to get working DataView export function
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/CSV/ExportCsv/react/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="This example shows how to export grid rows as a CSV file" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Export CSV | Features | GrapeCity DataViewsJS React Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'react', DVJS_LICENSE_KEY: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/file-saver/dist/FileSaver.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script> <script src="systemjs.config.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script type="text/javascript"> System.import('./app.js'); </script> </body> </html>
import React from 'react'; import ReactDOM from 'react-dom'; import { getControlByElement } from '@grapecity/dataviews.core'; import DataView from '@grapecity/dataviews.react'; import { GridLayout } from '@grapecity/dataviews.grid'; import '@grapecity/dataviews.csvexport'; import { data } from './data'; import locale from './locale'; export const cols = [ { id: 'firstName', caption: 'First Name', dataField: 'firstName', width: 90, }, { id: 'lastName', caption: 'Last Name', dataField: 'lastName', width: 90, }, { id: 'fullName', caption: 'Full Name', dataField: 'firstName,lastName', width: 150, }, { id: 'score', caption: 'Score', dataField: 'score', width: 100, }, { id: 'position', caption: 'Position', dataField: 'position', width: 150, }, { id: 'advantage', caption: 'Advantage', dataField: 'advantage', width: '*', }, ]; const layout = new GridLayout(); function App() { const [selection, setSelection] = React.useState('all'); const options = { selectionMode: selection === 'all' ? 'single' : 'multiple', selectionUnit: selection === 'selectedCells' || selection === 'selectedColumns' ? 'cell' : 'row', }; const handleSelectionChange = (e) => { setSelection(e.target.value); }; const handleExport = () => { const dataView = getControlByElement(document.body); const csv = dataView.export({ format: 'csv', selection }); window.saveAs(new Blob([csv], { type: 'text/plain' }), 'data.csv'); dataView.container.focus(); }; return ( <div className="main-container"> <div className="sample-options"> <div className="option-row"> <label>{locale.selection}</label> <select id="selection" value={selection} onChange={handleSelectionChange}> <option value="all">{locale.all}</option> <option value="selectedRows">{locale.selectedRows}</option> <option value="selectedCells">{locale.selectedCells}</option> <option value="selectedColumns">{locale.selectedColumns}</option> </select> </div> <div className="option-row"> <button id="btn-export" className="btn btn-default" onClick={handleExport}> {locale.export} </button> </div> </div> <DataView id="grid" className="grid" data={data} cols={cols} layout={layout} options={options} autoFocus /> </div> ); } ReactDOM.render(<App />, document.getElementById('root'));
// resumes export const data = [ { firstName: 'Alexa', lastName: 'Wilder', registeredDate: 'Oct 14, 2018', score: 90, position: 'Web Developer', advantage: 'Very smart. He can solve problems in a short time.', }, { firstName: 'Victor', lastName: 'Wooten', registeredDate: 'May 14, 2018', score: 70, position: 'Web Developer', advantage: 'Positive and optimistic, always first to work on latest technology in company.', }, { firstName: 'Darrin', lastName: 'Sweeney', registeredDate: 'June 14, 2018', score: 60, position: '.NET Developer', advantage: 'Loves games day, family day, and outings.', }, { firstName: 'Jen', lastName: 'Coulter', registeredDate: 'April 14, 2018', score: '95', position: 'Admin Assistant', advantage: 'Very good communication skills.', }, { firstName: 'Ifeoma', lastName: 'Mays', registeredDate: 'April 14,2018', score: 85, position: 'Sales Manager', advantage: 'Manages his team well. They are always ready to resolve conflict.', }, { firstName: 'Akeem', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 80, position: 'Sales Manager', advantage: 'Has experience in managing teams over 20 employees.', }, { firstName: 'Buffy', lastName: 'Weber', registeredDate: 'April 25, 2018', score: 80, position: 'Sales', advantage: 'Is eager to communicate with others.', }, { firstName: 'Akeem', lastName: 'Abdul', registeredDate: 'April 14, 2018', score: 80, position: 'Web Developer', advantage: 'Positive and optimistic, always first to work on latest technology in company.', }, { firstName: 'Buffy', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 90, position: 'Web Developer', advantage: 'Very smart. He can solve problems quickly.', }, { firstName: 'Guy', lastName: 'Wooten', registeredDate: 'July 14, 2018', score: 90, position: 'Web Developer', advantage: 'A lot of experience on latest technology.', }, { firstName: 'Gina', lastName: 'Wilder', registeredDate: 'Oct 14, 2018', score: 70, position: 'Web Developer', advantage: 'Very smart. She can solve problems quickly.', }, { firstName: 'Guy', lastName: 'Wooten', registeredDate: 'May 14, 2018', score: 90, position: 'Sales', advantage: 'Is eager to communicate with others Would be good at networking.', }, { firstName: 'Daryl', lastName: 'Sweeney', registeredDate: 'June 14, 2018', score: 90, position: 'Sales', advantage: 'Love games day, family day, and outings.', }, { firstName: 'Sally', lastName: 'Weber', registeredDate: 'April 14, 2018', score: 90, position: 'Web Developer', advantage: 'Very smart. She can solve problems quickly.', }, { firstName: 'Euna Lee', lastName: 'Mays', registeredDate: 'April 14,2018', score: 90, position: 'Admin Assistant', advantage: 'HR department is good. They always ready to resolve confusions if any.', }, { firstName: 'Akeem', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 60, position: 'Admin Assistant', advantage: 'Manages his team well. They are always ready to resolve conflict.', }, { firstName: 'Buffy', lastName: 'Weber', registeredDate: 'April 25, 2018', score: 65, position: 'Admin Assistant', advantage: 'Manages her team well. They are always ready to resolve conflict.', }, { firstName: 'Aaron', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 60, position: '.NET Developer', advantage: 'Very smart. He can solve problems quickly.', }, { firstName: 'Buffy', lastName: 'Carr', registeredDate: 'April 14, 2018', score: 70, position: '.NET Developer', advantage: 'A lot of exposure on latest technology.', }, { firstName: 'Guy', lastName: 'Junker', registeredDate: 'July 14, 2018', score: 80, position: '.NET Developer', advantage: 'A lot of exposure on latest technology.', }, ];
module.exports = { selection: 'Selection:', all: 'All', selectedRows: 'Selected Rows', selectedCells: 'Selected Cells', selectedColumns: 'Selected Columns', export: 'CSV Export', };
.main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { display: flex; align-items: center; background: #fbfbfb; padding: 6px; flex: 0 0 auto; height: auto; } .sample-options .option-row { margin-right: 5px; } .sample-options label { margin-right: 5px; } .sample-options select { margin: 5px 0; } .grid { width: 100%; flex: 1 1 auto; height: auto; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NTVi9FeHBvcnRDc3YvcmVhY3Qvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9DU1YvRXhwb3J0Q3N2L3JlYWN0L3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLFlBQUE7QUNDRjtBRENFO0VBQ0UsaUJBQUE7QUNDSjtBREVFO0VBQ0UsaUJBQUE7QUNBSjtBREdFO0VBQ0UsYUFBQTtBQ0RKOztBREtBO0VBQ0UsV0FBQTtFQUNBLGNBQUE7RUFDQSxZQUFBO0FDRkYiLCJmaWxlIjoiRmVhdHVyZXMvQ1NWL0V4cG9ydENzdi9yZWFjdC9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgcGFkZGluZzogNnB4O1xuICBmbGV4OiAwIDAgYXV0bztcbiAgaGVpZ2h0OiBhdXRvO1xuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxuXG4gIGxhYmVsIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxuXG4gIHNlbGVjdCB7XG4gICAgbWFyZ2luOiA1cHggMDtcbiAgfVxufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4OiAxIDEgYXV0bztcbiAgaGVpZ2h0OiBhdXRvO1xufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgcGFkZGluZzogNnB4O1xuICBmbGV4OiAwIDAgYXV0bztcbiAgaGVpZ2h0OiBhdXRvO1xufVxuLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyBzZWxlY3Qge1xuICBtYXJnaW46IDVweCAwO1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4OiAxIDEgYXV0bztcbiAgaGVpZ2h0OiBhdXRvO1xufSJdfQ== */
(function () { const IS_PROD = window.process.env.NODE_ENV === 'production'; const USE_NPM = window.process.env.USE_NPM; const USE_CDN = window.process.env.USE_CDN; const SITE_ROOT = window.process.env.SITE_ROOT; const FRAMEWORK = window.process.env.FRAMEWORK; const ext = IS_PROD ? '.min.js' : '.js'; function js(name) { return name + ext; } function npm(t) { if (!t.file) { t.file = IS_PROD ? t.prod : t.dev; } const version = USE_CDN && t.version ? '@' + t.version : ''; const path = t.pkg + version + '/' + t.file; if (USE_CDN) { return 'https://unpkg.com/' + path; } return 'npm:' + path; } function dv(t) { if (USE_CDN || USE_NPM) { t.file = 'dist/' + t.file + '.min.js'; return npm(t); } return SITE_ROOT + '/static/dataviews/' + js(t.file); } const isTypeScript = FRAMEWORK === 'angular'; const babelConfig = { es2015: true, react: true, }; const meta = { js: { babelOptions: babelConfig, }, ts: { typescriptOptions: { tsconfig: true }, }, }; const map = { // gc.dataviews packages '@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.7'}), '@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.7'}), '@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.7'}), '@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.7'}), '@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.7'}), '@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.7'}), '@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.7'}), '@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.7'}), '@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.7'}), '@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.7'}), '@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.7'}), '@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.7'}), '@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.7'}), '@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.7'}), // third-party libs react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}), 'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}), 'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}), 'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.11'}), 'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.3.4'}), 'lodash': npm({pkg: 'lodash', file: js('lodash')}), 'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}), 'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}), 'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}), '@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}), '@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}), '@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}), '@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}), '@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}), '@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}), '@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}), '@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}), '@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}), // systemjs plugins 'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}), 'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}), 'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}), 'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}), 'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}), 'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'3.9.7'}), 'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}), }; const config = { defaultJSExtensions: true, transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel', typescriptOptions: { tsconfig: true }, meta: { '*.json': {loader: 'systemjs-plugin-json'}, '*.css': {loader: 'systemjs-plugin-css'}, '*.vue': {loader: 'systemjs-vue-browser'}, '*.js': meta.js, '*.ts': meta.ts, 'app.js': { format: 'esm', babelOptions: babelConfig, }, 'typescript': { exports: 'ts', }, '@grapecity/dataviews.common': { format: 'amd', }, '@grapecity/dataviews.core': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.grid': { format: 'amd', deps: [ '@grapecity/dataviews.common', '@grapecity/dataviews.core', ], }, '@grapecity/dataviews.cardlayout': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.masonry': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.calendar': { format: 'amd', deps: [ '@grapecity/dataviews.common', '@grapecity/dataviews.core', ], }, '@grapecity/dataviews.timeline': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.trellis': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.gantt': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.searchbox': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.react': { format: 'amd', deps: [ 'react', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.vue': { format: 'amd', deps: [ 'vue', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.angular': { format: 'amd', deps: [ '@angular/core', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.csvexport': { format: 'amd', deps: [ '@grapecity/dataviews.common' ], }, }, paths: { // paths serve as alias 'npm:': SITE_ROOT + '/node_modules/', }, // map tells the System loader where to look for things map: map, // packages tells the System loader how to load when no filename and/or no extension packages: { '.': { defaultExtension: isTypeScript ? 'ts' : 'js' }, node_modules: { defaultExtension: 'js' }, } }; // fast format detection to avoid detection by source code using regexp Object.keys(map).filter(function (key) { return !config.meta[key]; }).forEach(function (key) { const path = map[key]; if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) { config.meta[key] = { format: 'amd' }; } if (path.indexOf('/cjs') >= 0) { config.meta[key] = { format: 'cjs' }; } }); System.config(config); })(this);