Trellis with Grid Layout | Data Views | MESCIUS DataViewsJS React Demos

This example demonstrates how you can use the Trellis grouping strategy with the Grid Layout Engine in DataViews to make a Kanban board similar to Trello™. This view is essentially a grid view grouped into vertical lists. Dragging a card from column to column changes the group and the underlying data value. There are three primary parts that make this demo work: References to grid.js and trellis.js provide the core functionality. A row template is configured to format each row as a card. The groupStrategy: trellis option/value pair is used to set the group strategy. You can switch between Default and Trellis views using the buttons at the top of the page to see what the data looks like in an ordinary grid.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Trellis/TrellisWithGridLayout/react/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grouping, trellis" />
<meta
name="description"
content="This example demonstrates how you can use the Trellis grouping strategy with the Grid Layout Engine in DataViews to make a Kanban board similar to Trello™."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trellis with Grid Layout | Data Views | 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/css/bootstrap-snippet.min.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="/dataviewsjs/demos/static/dataviews/gc.dataviews.trellis.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 { GridLayout } from '@grapecity/dataviews.grid';
import TrellisGrouping from '@grapecity/dataviews.trellis';
import { data } from './data';
import locale from './locale';
const { useState } = React;
const rowTemplate = `<div class="group-item-container">
<div class="group-item-container-inner {{? it.progress==100}}finish{{?? it.progress>=80}}eighty-per{{?? it.progress>=50}}fifty-per{{?? it.progress>=30}}thirty-per{{??}}start{{?}}">
<div data-column="title" class="group-item-title"></div>
<div data-column="photo" class="group-photo-container"></div>
<div data-column="description" class="group-item-description"></div>
</div>
</div>`;
const photoPresenter = '<img class="employee-photo" src={{=it.photo}} />';
const cols = [
{ id: 'title', name: 'title', dataField: 'title' },
{ id: 'description', name: 'description', dataField: 'description' },
{ id: 'photo', dataField: 'photo', presenter: photoPresenter },
{ id: 'progress', dataField: 'progress' },
];
const trellis = new TrellisGrouping({
panelUnitWidth: 190,
});
const layout = new GridLayout({
grouping: [
{ field: 'work', header: { height: 24 }, footer: { visible: false } },
{ field: 'category', header: { height: 24 }, footer: { visible: false } },
],
rowTemplate,
rowHeight: 120,
groupStrategy: trellis,
});
const gridOptions = {
groupStrategy: null,
grouping: null,
rowHeight: 40,
colHeaderHeight: 40,
rowTemplate: null,
};
const trellisOptions = {
grouping: [
{ field: 'work', header: { height: 24 }, footer: { visible: false } },
{ field: 'category', header: { height: 24 }, footer: { visible: false } },
],
groupStrategy: trellis,
rowHeight: 120,
rowTemplate,
};
const App = () => {
const [view, setView] = useState('trellis');
const btnClass = (target) => {
const active = target === view ? ' active' : '';
return `btn btn-default${active}`;
};
const options = view === 'trellis' ? trellisOptions : gridOptions;
return (
<div className="main-container">
<div className="sample-options">
<div className="btn-group">
<button id="normal" type="button" className={btnClass('default')} onClick={() => setView('default')}>
{locale.view}
</button>
<button id="trellis" type="button" className={btnClass('trellis')} onClick={() => setView('trellis')}>
{locale.trellis}
</button>
</div>
</div>
<DataView id="grid" className="grid" data={data} cols={cols} layout={layout} options={options} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

// timeline board
const SITE_ROOT = window.process.env.SITE_ROOT;
export const data = [
{
work: 'Future Work',
category: 'New Requests',
description: 'Update our logo.',
title: 'Update Logo',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 0,
},
{
work: 'Future Work',
category: 'New Requests',
description: 'Update our logo2.',
title: 'Update Logo2',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 0,
},
{
work: 'Future Work',
category: 'Approved',
description: "Click the '+' or '-' icons at the top of group.",
title: 'Read Me First',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 0,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Come up with a schedule for alpha release',
title: 'Schedule me!',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 10,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Come up with a schedule for onboarding',
title: 'Schedule me!',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Find the hidden risk on the board',
title: 'Identify the problem.',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 90,
},
{
work: 'Doing Now',
category: 'Executive Team',
description: 'Write a buzzword blog post.',
title: 'Blog Post',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Test Team',
description: 'Test the new IPhone app',
title: 'IPhone APP',
photo: SITE_ROOT + '/images/bw.jpg',
progress: 50,
},
{
work: 'Doing Now',
category: 'Test Team',
description: 'Calendar does not work',
title: 'Issue #987432',
photo: SITE_ROOT + '/images/bw.jpg',
progress: 70,
},
{
work: 'Doing Now',
category: 'Test Team',
description: 'Android mobile app',
title: 'Android APP',
photo: SITE_ROOT + '/images/bw.jpg',
progress: 80,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 3.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 40,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 2.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 70,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/hh.jpg',
progress: 70,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/hh.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/hh.jpg',
progress: 20,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 60,
},
{
work: 'Doing Now',
category: 'Development Team',
description: 'Update the Knowledge Base Part 1.',
title: 'Add some tags!',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 90,
},
{
work: 'Ready to Archive (Last 14 Days)',
category: 'Finished as Planned',
description: 'Give development team more cards',
title: 'Create Some Cards',
photo: SITE_ROOT + '/images/ac.jpg',
progress: 100,
},
{
work: 'Ready to Archive (Last 14 Days)',
category: 'Started but not Finished',
description: 'Build a new website',
title: 'Assign a User',
photo: SITE_ROOT + '/images/ds.jpg',
progress: 100,
},
{
work: 'Ready to Archive (Last 14 Days)',
category: 'Discarded Requests',
description: 'A little slow on Android.',
title: 'Issue #987234',
photo: SITE_ROOT + '/images/gw.jpg',
progress: 100,
},
];

module.exports = { view: 'Default', trellis: 'Trellis' };

.main-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sample-options {
display: flex;
background: #fbfbfb;
box-sizing: border-box;
float: right;
overflow: auto;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.grid {
width: calc(100% - 20px);
height: 100%;
flex-grow: 1;
flex-shrink: 1;
margin: 0 10px;
}
.employee-photo {
border-radius: 50%;
height: 32px;
width: 32px;
}
.group-item-container {
height: 100%;
overflow: hidden;
position: relative;
}
.group-item-container .group-item-container-inner {
border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
color: #f1f1f1;
height: 95%;
overflow: hidden;
margin: 5px;
}
.group-item-container .group-item-container-inner .group-item-title {
border: 0;
color: white;
font-size: 14px;
padding: 0.4em;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-item-container .group-item-container-inner .group-photo-container {
bottom: 0;
position: absolute;
right: 10px;
}
.group-item-container .group-item-container-inner .group-item-description {
font-size: 10px;
padding: 8px;
}
.group-item-container .group-item-container-inner.finish {
background: #9ec7c9;
}
.group-item-container .group-item-container-inner.finish .group-item-title {
background: #5c989b;
}
.group-item-container .group-item-container-inner.eighty-per {
background: #a98daf;
}
.group-item-container .group-item-container-inner.eighty-per .group-item-title {
background: #85638d;
}
.group-item-container .group-item-container-inner.fifty-per {
background: #a19fbe;
}
.group-item-container .group-item-container-inner.fifty-per .group-item-title {
background: #6c6a91;
}
.group-item-container .group-item-container-inner.thirty-per {
background: #aa8995;
}
.group-item-container .group-item-container-inner.thirty-per .group-item-title {
background: #8e5a6d;
}
.group-item-container .group-item-container-inner.start {
background: #9eb3c9;
}
.group-item-container .group-item-container-inner.start .group-item-title {
background: #5d89b7;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoR3JpZExheW91dC9yZWFjdC9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoR3JpZExheW91dC9yZWFjdC9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0Esc0JBQUE7QUNDRjs7QURFQTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjs7QURFQTtFQUNFLHdCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREVBO0VBQ0Usa0JBQUE7RUFDQSxZQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNDRjtBRENFO0VBQ0Usa0JBQUE7RUFDQSx3Q0FBQTtFQUNBLGNBQUE7RUFDQSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSxXQUFBO0FDQ0o7QURDSTtFQUNFLFNBQUE7RUFDQSxZQUFBO0VBQ0EsZUFBQTtFQUNBLGNBQUE7RUFDQSx1QkFBQTtFQUNBLG1CQUFBO0FDQ047QURFSTtFQUNFLFNBQUE7RUFDQSxrQkFBQTtFQUNBLFdBQUE7QUNBTjtBREdJO0VBQ0UsZUFBQTtFQUNBLFlBQUE7QUNETjtBRElJO0VBQ0UsbUJBQUE7QUNGTjtBRElNO0VBQ0UsbUJBQUE7QUNGUjtBRE1JO0VBQ0UsbUJBQUE7QUNKTjtBRE1NO0VBQ0UsbUJBQUE7QUNKUjtBRFFJO0VBQ0UsbUJBQUE7QUNOTjtBRFFNO0VBQ0UsbUJBQUE7QUNOUjtBRFVJO0VBQ0UsbUJBQUE7QUNSTjtBRFVNO0VBQ0UsbUJBQUE7QUNSUjtBRFlJO0VBQ0UsbUJBQUE7QUNWTjtBRFlNO0VBQ0UsbUJBQUE7QUNWUiIsImZpbGUiOiJEYXRhVmlld3MvVHJlbGxpcy9UcmVsbGlzV2l0aEdyaWRMYXlvdXQvcmVhY3Qvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGZsb2F0OiByaWdodDtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG5cbi5ncmlkIHtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtIDIwcHgpO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG1hcmdpbjogMCAxMHB4O1xufVxuXG4uZW1wbG95ZWUtcGhvdG8ge1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGhlaWdodDogMzJweDtcbiAgd2lkdGg6IDMycHg7XG59XG5cbi5ncm91cC1pdGVtLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lciB7XG4gICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gICAgY29sb3I6ICNmMWYxZjE7XG4gICAgaGVpZ2h0OiA5NSU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBtYXJnaW46IDVweDtcblxuICAgIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgICAgIGJvcmRlcjogMDtcbiAgICAgIGNvbG9yOiB3aGl0ZTtcbiAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgIHBhZGRpbmc6IDAuNGVtO1xuICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIH1cblxuICAgIC5ncm91cC1waG90by1jb250YWluZXIge1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgcmlnaHQ6IDEwcHg7XG4gICAgfVxuXG4gICAgLmdyb3VwLWl0ZW0tZGVzY3JpcHRpb24ge1xuICAgICAgZm9udC1zaXplOiAxMHB4O1xuICAgICAgcGFkZGluZzogOHB4O1xuICAgIH1cblxuICAgICYuZmluaXNoIHtcbiAgICAgIGJhY2tncm91bmQ6ICM5ZWM3Yzk7XG5cbiAgICAgIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgICAgICAgYmFja2dyb3VuZDogIzVjOTg5YjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmLmVpZ2h0eS1wZXIge1xuICAgICAgYmFja2dyb3VuZDogbGlnaHRlbigjODU2MzhkLCAxNSUpO1xuXG4gICAgICAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICM4NTYzOGQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5maWZ0eS1wZXIge1xuICAgICAgYmFja2dyb3VuZDogI2ExOWZiZTtcblxuICAgICAgLmdyb3VwLWl0ZW0tdGl0bGUge1xuICAgICAgICBiYWNrZ3JvdW5kOiAjNmM2YTkxO1xuICAgICAgfVxuICAgIH1cblxuICAgICYudGhpcnR5LXBlciB7XG4gICAgICBiYWNrZ3JvdW5kOiAjYWE4OTk1O1xuXG4gICAgICAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICM4ZTVhNmQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJi5zdGFydCB7XG4gICAgICBiYWNrZ3JvdW5kOiAjOWViM2M5O1xuXG4gICAgICAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICM1ZDg5Yjc7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmbG9hdDogcmlnaHQ7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBtYXJnaW46IDAgMTBweDtcbn1cblxuLmVtcGxveWVlLXBob3RvIHtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBoZWlnaHQ6IDMycHg7XG4gIHdpZHRoOiAzMnB4O1xufVxuXG4uZ3JvdXAtaXRlbS1jb250YWluZXIge1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5ncm91cC1pdGVtLWNvbnRhaW5lciAuZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIge1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGJveC1zaGFkb3c6IDAgM3B4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGNvbG9yOiAjZjFmMWYxO1xuICBoZWlnaHQ6IDk1JTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgbWFyZ2luOiA1cHg7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgYm9yZGVyOiAwO1xuICBjb2xvcjogd2hpdGU7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgcGFkZGluZzogMC40ZW07XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lciAuZ3JvdXAtcGhvdG8tY29udGFpbmVyIHtcbiAgYm90dG9tOiAwO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAxMHB4O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lciAuZ3JvdXAtaXRlbS1kZXNjcmlwdGlvbiB7XG4gIGZvbnQtc2l6ZTogMTBweDtcbiAgcGFkZGluZzogOHB4O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5maW5pc2gge1xuICBiYWNrZ3JvdW5kOiAjOWVjN2M5O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5maW5pc2ggLmdyb3VwLWl0ZW0tdGl0bGUge1xuICBiYWNrZ3JvdW5kOiAjNWM5ODliO1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5laWdodHktcGVyIHtcbiAgYmFja2dyb3VuZDogI2E5OGRhZjtcbn1cbi5ncm91cC1pdGVtLWNvbnRhaW5lciAuZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIuZWlnaHR5LXBlciAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJhY2tncm91bmQ6ICM4NTYzOGQ7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyLmZpZnR5LXBlciB7XG4gIGJhY2tncm91bmQ6ICNhMTlmYmU7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyLmZpZnR5LXBlciAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJhY2tncm91bmQ6ICM2YzZhOTE7XG59XG4uZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyLnRoaXJ0eS1wZXIge1xuICBiYWNrZ3JvdW5kOiAjYWE4OTk1O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci50aGlydHktcGVyIC5ncm91cC1pdGVtLXRpdGxlIHtcbiAgYmFja2dyb3VuZDogIzhlNWE2ZDtcbn1cbi5ncm91cC1pdGVtLWNvbnRhaW5lciAuZ3JvdXAtaXRlbS1jb250YWluZXItaW5uZXIuc3RhcnQge1xuICBiYWNrZ3JvdW5kOiAjOWViM2M5O1xufVxuLmdyb3VwLWl0ZW0tY29udGFpbmVyIC5ncm91cC1pdGVtLWNvbnRhaW5lci1pbm5lci5zdGFydCAuZ3JvdXAtaXRlbS10aXRsZSB7XG4gIGJhY2tncm91bmQ6ICM1ZDg5Yjc7XG59Il19 */

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

Trellis with Grid Layout (React)