Multiple Column Headers (React)

Theme:

This example demonstrates how to implement multiple column headers, or column groups.

This example uses React.

To group headers, add a composite column object in the column configuration. The composite column object appears as follows:

{
    caption: 'header',
    columns: [col1, col2, col2],
}

In this example, there are two column groups, Employee Info and Days Taken. The columns under these headings are their children. You can set these groups to expandable by setting the headerGroupShow property on child columns. You can see this in the Days Taken group. The group expander button is automatically added.

The available values for headerGroupShow:

expanded: The column is only shown when the group is expanded.
collapsed: The column is only shown when the group is collapsed.

The child columns are always shown when the headerGroupShow property is not set. When there is no column can be shown according to the settings, DataViews will ignore the setting and show all columns by default.

Feedback

Submit and view feedback for

This Product This Page

This example demonstrates how to implement multiple column headers, or column groups. This feature allows you to group headers by including them in a second header. You can also make the groups expandable. To group headers, add a composite column object in the column configuration. The composite column object appears as follows: In this example, there are two column groups, Employee Info and Days Taken. The columns under these headings are their children. You can set these groups to expandable by setting the headerGroupShow property on child columns. You can see this in the Days Taken group. The group expander button is automatically added. The available values for headerGroupShow: expanded: The column is only shown when the group is expanded. collapsed: The column is only shown when the group is collapsed. The child columns are always shown when the headerGroupShow property is not set. When there is no column can be shown according to the settings, DataViews will ignore the setting and show all columns by default.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Columns/MultipleColumnHeaders/react/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="columns, multiple column headers, multiple headers, headers group, header group" />
<meta
name="description"
content="This example demonstrates how to implement multiple column headers, or column groups."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiple Column Headers | Features | MESCIUS 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" />
<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:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;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.js');
</script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
import DataView from '@grapecity/dataviews.react';
import '@grapecity/dataviews.grid';
import { data } from './data';
export const cols = [
{
caption: 'Employee Info',
columns: [
{
id: 'name',
caption: 'Name',
dataField: 'Name',
width: 150,
},
{
id: 'dept',
caption: 'Department',
dataField: 'Department',
width: 110,
},
],
},
{
id: 'paidVacation',
caption: 'Paid Vacation',
dataField: 'PaidVacation',
width: 120,
},
{
caption: 'Days Taken',
columns: [
{
id: 'Jan',
caption: 'Jan',
dataField: 'Jan',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Feb',
caption: 'Feb',
dataField: 'Feb',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Mar',
caption: 'Mar',
dataField: 'Mar',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Apr',
caption: 'Apr',
dataField: 'Apr',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'May',
caption: 'May',
dataField: 'May',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Jun',
caption: 'Jun',
dataField: 'Jun',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Jul',
caption: 'Jul',
dataField: 'Jul',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Aug',
caption: 'Aug',
dataField: 'Aug',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Sep',
caption: 'Sep',
dataField: 'Sep',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Oct',
caption: 'Oct',
dataField: 'Oct',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Nov',
caption: 'Nov',
dataField: 'Nov',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Dec',
caption: 'Dec',
dataField: 'Dec',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'total',
caption: 'Total Leave',
dataType: 'number',
dataField: '=[Jan]+[Feb]+[Mar]+[Apr]+[May]+[Jun]+[Jul]+[Aug]+[Sep]+[Oct]+[Nov]+[Dec]',
width: 120,
},
],
},
];
ReactDOM.render(
<DataView id="grid" className="grid" data={data} cols={cols} autoFocus />,
document.getElementById('root')
);

// paid leaves
export const data = [
{
Name: 'Alfreds Futterkiste',
Department: 'Admin',
PaidVacation: 15,
Jan: 2,
Feb: 1,
Mar: 0,
Apr: 0,
May: 3,
Jun: 0,
Jul: 0,
Aug: 1,
Sep: 0,
Oct: 1,
Nov: 2,
Dec: 0,
},
{
Name: 'Owen Wilson',
Department: 'IT',
PaidVacation: 12,
Jan: 3,
Feb: 0,
Mar: 0,
Apr: 0,
May: 1,
Jun: 0,
Jul: 5,
Aug: 1,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Michael Scott',
Department: 'IT',
PaidVacation: 15,
Jan: 0,
Feb: 1,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 10,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Camila Alves',
Department: 'HR',
PaidVacation: 10,
Jan: 1,
Feb: 1,
Mar: 1,
Apr: 1,
May: 1,
Jun: 1,
Jul: 0,
Aug: 2,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Kate Hudson',
Department: 'Admin',
PaidVacation: 10,
Jan: 0,
Feb: 5,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 0,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Melanie Griffith',
Department: 'Payroll',
PaidVacation: 15,
Jan: 0,
Feb: 0,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 0,
Aug: 0,
Sep: 10,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Rebecca Romijn',
Department: 'Admin',
PaidVacation: 12,
Jan: 0,
Feb: 0,
Mar: 0,
Apr: 3,
May: 0,
Jun: 0,
Jul: 0,
Aug: 1,
Sep: 2,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Ashlee Simpson',
Department: 'Payroll',
PaidVacation: 15,
Jan: 0,
Feb: 0,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 0,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'John Herzfeld',
Department: 'IT',
PaidVacation: 10,
Jan: 0,
Feb: 1,
Mar: 2,
Apr: 0,
May: 0,
Jun: 0,
Jul: 1,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 1,
},
];

.gc-column-header-cell[data-column=Jan],
.gc-column-header-cell[data-column=Feb],
.gc-column-header-cell[data-column=Mar],
.gc-column-header-cell[data-column=Apr],
.gc-column-header-cell[data-column=May],
.gc-column-header-cell[data-column=Jun],
.gc-column-header-cell[data-column=Jul],
.gc-column-header-cell[data-column=Aug],
.gc-column-header-cell[data-column=Sep],
.gc-column-header-cell[data-column=Oct],
.gc-column-header-cell[data-column=Nov],
.gc-column-header-cell[data-column=Dec],
.gc-column-header-cell[data-column=total] {
justify-content: center;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NvbHVtbnMvTXVsdGlwbGVDb2x1bW5IZWFkZXJzL3JlYWN0L3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvQ29sdW1ucy9NdWx0aXBsZUNvbHVtbkhlYWRlcnMvcmVhY3Qvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7OztFQWFFLHVCQUFBO0FDQ0YiLCJmaWxlIjoiRmVhdHVyZXMvQ29sdW1ucy9NdWx0aXBsZUNvbHVtbkhlYWRlcnMvcmVhY3Qvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J0phbiddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nRmViJ10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdNYXInXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J0FwciddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nTWF5J10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdKdW4nXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J0p1bCddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nQXVnJ10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdTZXAnXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J09jdCddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nTm92J10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdEZWMnXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J3RvdGFsJ10ge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbiIsIi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49SmFuXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49RmViXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49TWFyXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49QXByXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49TWF5XSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49SnVuXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49SnVsXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49QXVnXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49U2VwXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49T2N0XSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49Tm92XSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49RGVjXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49dG90YWxdIHtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59Il19 */

(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);