This example shows how to present hierarchical data in a tree column. In the demo, the data is organized by department and sub-department and is also grouped by country. Note that grouping is secondary to this example.
The Grid Layout Engine includes the tree column feature and to enable it, you only need to configure the hierarchy property.
keyField: used to map to the parent data, id in this example.
parentField: indicates what field the parent of the record is defined in, parent in this example.
column: the column to which the tree will be applied.
Note: This demo shows that the tree column works with the group. Regardless of groups, the tree grid policy is as follows: items whose parent field value is null, undefined, or '' (empty string) will be treated as root nodes. For other items, if the parent field is specified and there is no item whose key field value is equal to the specified parent value, the item is not shown in the control since the root does not exist. Depending on group and hierarchy settings, there may be some bottom level groups that have child items, but no item is shown. This is because the root node is absent in the group.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/TreeGrid/TreeColumn/vue/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="tree, treegrid, tree grid, hirarchy, hirarchical, parent child" />
<meta name="description" content="This example shows how to present hierarchical data in a tree column." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tree Column | Data Views | MESCIUS DataViewsJS Vue 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" />
<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: 'vue',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</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">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
System.import('./app.vue');
</script>
</body>
</html>
<template>
<gc-dataview id="grid" class="grid" :data="data" :cols="cols" :layout="layout" v-on:create="init" :autoFocus="true" />
</template>
<script>
import Vue from 'vue';
import '@grapecity/dataviews.vue';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data } from './data';
export const cols = [
{
id: 'department',
caption: 'Department',
dataField: 'department',
width: 250,
hierarchyFooter: '<span style="font-weight:bold">Count: {{=it.eval("=COUNT([id])")}}</span>',
},
{
id: 'budgetTotal',
caption: 'Total Budget',
dataField: '=SUMX(Hierarchy.Children(true, true), [budget])',
format: '$0.00',
minWidth: 120,
hierarchyFooter:
'<span style="font-weight:bold">Total: {{=it.eval("=SUMX(Hierarchy.Children(true, true), [budget])", "$0,0")}}</span>',
},
{
id: 'budget',
caption: 'Own Budget',
dataField: 'budget',
format: '$0.00',
minWidth: 120,
},
{
id: 'location',
caption: 'Location',
dataField: 'location',
minWidth: 120,
},
{
id: 'phone',
caption: 'Phone',
dataField: 'phone',
minWidth: 120,
},
{
id: 'country',
caption: 'Country',
dataField: 'country',
minWidth: 120,
},
{
id: 'id',
caption: 'Id',
dataField: 'id',
visible: false,
},
{
id: 'parent',
caption: 'Parent',
dataField: 'parent',
visible: false,
},
];
const layout = new GridLayout({
allowSorting: true,
showRowHeader: false,
grouping: [
{
field: 'country',
footer: {
visible: false,
},
},
],
hierarchy: {
keyField: 'id',
parentField: 'parent',
collapsed: true,
column: 'department',
footer: {
visible: true,
},
},
});
new Vue({
el: '#root',
data: { data, cols, layout },
methods: {
init(dataView) {
// expand first level
dataView.data.groups.forEach((group) => {
if (group.rootNode) {
group.rootNode.children.forEach((node) => {
node.collapsed = false;
});
}
});
dataView.invalidate();
},
},
});
</script>
export const data = [
{
id: 1,
department: 'Corporate Headquarters',
budget: 13000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: null,
},
{
id: 2,
department: 'Sales and Marketing',
budget: 6000,
location: 'San Francisco',
phone: '(408) 555-1234',
country: 'US',
parent: 1,
},
{
id: 3,
department: 'Finance',
budget: 4000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 1,
},
{
id: 4,
department: 'Engineering',
budget: 11000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 1,
},
{
id: 5,
department: 'Field Office: East Coast',
budget: 5000,
location: 'Toronto',
phone: '(416) 677-1000',
country: 'US',
parent: 2,
},
{
id: 6,
department: 'Field Office: East Coast',
budget: 5000,
location: 'Boston',
phone: '(408) 555-1234',
country: 'US',
parent: 2,
},
{
id: 7,
department: 'Pacific Rim Headquarters',
budget: 3000,
location: 'Kuaui',
phone: '(408) 555-1234',
country: 'US',
parent: 2,
},
{
id: 8,
department: 'Marketing',
budget: 15000,
location: 'San Francisco',
phone: '(408) 555-1234',
country: 'US',
parent: 2,
},
{
id: 9,
department: 'Field Office: Singapore',
budget: 3000,
location: 'Singapore',
phone: '(606) 555-5486',
country: 'US',
parent: 7,
},
{
id: 10,
department: 'Field Office: Japan',
budget: 5000,
location: 'Tokyo',
phone: '(707) 555-1526',
country: 'US',
parent: 7,
},
{
id: 11,
department: 'Consumer Electronics Div',
budget: 11000,
location: 'Burlington, VT',
phone: '(802) 555-1234',
country: 'US',
parent: 4,
},
{
id: 12,
department: 'Software Products Div',
budget: 12000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 4,
},
{
id: 13,
department: 'Software Development',
budget: 4000,
location: 'Monterey',
phone: '(802) 555-1234',
country: 'US',
parent: 11,
},
{
id: 14,
department: 'Quality Assurance',
budget: 4800,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 12,
},
{
id: 15,
department: 'Customer Support',
budget: 3800,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 12,
},
{
id: 16,
department: 'Research and Development',
budget: 4600,
location: 'Burlington, VT',
phone: '(408) 555-1234',
country: 'US',
parent: 12,
},
{
id: 17,
department: 'Customer Services',
budget: 8500,
location: 'Burlington, VT',
phone: '(408) 555-1234',
country: 'US',
parent: 12,
},
{
id: 18,
department: 'Corporate Headquarters',
budget: 16000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: null,
},
{
id: 19,
department: 'Sales and Marketing',
budget: 5000,
location: 'Xian',
phone: '(2108) 555-29321',
country: 'China',
parent: 18,
},
{
id: 20,
department: 'Finance',
budget: 21000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 18,
},
{
id: 21,
department: 'Engineering',
budget: 10000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 18,
},
{
id: 22,
department: 'Field Office: East Coast',
budget: 21000,
location: 'Beijing',
phone: '(2286) 62424-1000',
country: 'China',
parent: 19,
},
{
id: 23,
department: 'Field Office: East Coast',
budget: 5000,
location: 'Boston',
phone: '(2108) 555-29321',
country: 'China',
parent: 19,
},
{
id: 24,
department: 'Pacific Rim Headquarters',
budget: 3000,
location: 'Kuaui',
phone: '(2108) 555-29321',
country: 'China',
parent: 19,
},
{
id: 25,
department: 'Marketing',
budget: 15000,
location: 'Xian',
phone: '(2108) 555-29321',
country: 'China',
parent: 19,
},
{
id: 26,
department: 'Field Office: Singapore',
budget: 24000,
location: 'Singapore',
phone: '(606) 555-52186',
country: 'China',
parent: 24,
},
{
id: 27,
department: 'Field Office: Japan',
budget: 5000,
location: 'Tokyo',
phone: '(24024) 555-15196',
country: 'China',
parent: 24,
},
{
id: 28,
department: 'Consumer Electronics Div',
budget: 13000,
location: 'Burlington, VT',
phone: '(8019) 555-29321',
country: 'China',
parent: 21,
},
{
id: 29,
department: 'Software Products Div',
budget: 8000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 21,
},
{
id: 30,
department: 'Software Development',
budget: 21000,
location: 'ShangHai',
phone: '(8019) 555-29321',
country: 'China',
parent: 28,
},
{
id: 31,
department: 'Quality Assurance',
budget: 51900,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 29,
},
{
id: 32,
department: 'CChinatomer Support',
budget: 32100,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 29,
},
{
id: 33,
department: 'Research and Development',
budget: 1800,
location: 'Burlington, VT',
phone: '(2108) 555-29321',
country: 'China',
parent: 29,
},
{
id: 34,
department: 'CChinatomer Services',
budget: 26600,
location: 'Burlington, VT',
phone: '(2108) 555-29321',
country: 'China',
parent: 29,
},
];
.grid .gc-cell.c1 {
justify-content: flex-end;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVlR3JpZC9UcmVlQ29sdW1uL3Z1ZS9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9UcmVlR3JpZC9UcmVlQ29sdW1uL3Z1ZS9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UseUJBQUE7QUNDRiIsImZpbGUiOiJEYXRhVmlld3MvVHJlZUdyaWQvVHJlZUNvbHVtbi92dWUvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ncmlkIC5nYy1jZWxsLmMxIHtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cbiIsIi5ncmlkIC5nYy1jZWxsLmMxIHtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn0iXX0= */
(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.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// 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.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'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:'4.0.2'}),
'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);
