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

This example demonstrates how you can use the Trellis Gouping Strategy with the Card Layout Engine, which is useful for implementations like task management. This view is essentially a grouped card layout that allows the user to change groups by dragging and dropping. You can see this by clicking the Default button. You can see the cards in a list grouped by category. This demo also serves as a simple game. If the item on the card matches the category, a green check mark appears. There are three primary parts that make this demo work: References to cardlayout.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.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Trellis/TrellisWithCardLayout/react/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grouping, card, trellies" />
<meta
name="description"
content="This example demonstrates how you can use the Trellis Gouping Strategy with the Card Layout Engine, which is useful for implementations like task management."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trellis with Card 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.cardlayout.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 CardLayout from '@grapecity/dataviews.cardlayout';
import TrellisGrouping from '@grapecity/dataviews.trellis';
import { data, groups } from './data';
import locale from './locale';
const { useState } = React;
const rowTemplate = `<div class="group-item-container">
<div class="group-item-container-inner">
<div class="image-container" data-column="image"></div>
<div class="name-container" data-column="name"></div>
{{?it.currentCategory===it.category}}
<div class="correct-mark"></div>
{{?}}
</div>
</div>`;
const imagePresenter = '<img class="flash-image" src={{=it.image}} />';
const cols = [
{ id: 'image', dataField: 'image', presenter: imagePresenter },
{ id: 'name', dataField: 'name' },
];
const trellis = new TrellisGrouping({
panelUnitWidth: 300,
});
const layout = new CardLayout({
cardHeight: 150,
cardWidth: 150,
grouping: [
{
field: 'currentCategory',
preDefinedGroups: groups,
header: { height: 30 },
},
],
groupStrategy: trellis,
rowTemplate,
});
const App = () => {
const [view, setView] = useState('trellis');
const btnClass = (target) => {
const active = target === view ? ' active' : '';
return `btn btn-default${active}`;
};
const options = {
groupStrategy: view === 'default' ? null : trellis,
};
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'));

// flashcard dataset
const SITE_ROOT = window.process.env.SITE_ROOT;
export const data = [
{
currentCategory: 'unclassified',
category: 'animal',
name: 'cat',
image: SITE_ROOT + '/images/cat.png',
},
{
currentCategory: 'unclassified',
category: 'animal',
name: 'dog',
image: SITE_ROOT + '/images/dog.png',
},
{
currentCategory: 'unclassified',
category: 'animal',
name: 'chicken',
image: SITE_ROOT + '/images/chicken.png',
},
{
currentCategory: 'unclassified',
category: 'animal',
name: 'lion',
image: SITE_ROOT + '/images/lion.png',
},
{
currentCategory: 'unclassified',
category: 'animal',
name: 'mouse',
image: SITE_ROOT + '/images/mouse.png',
},
{
currentCategory: 'unclassified',
category: 'animal',
name: 'pig',
image: SITE_ROOT + '/images/pig.png',
},
{
currentCategory: 'unclassified',
category: 'animal',
name: 'rabbit',
image: SITE_ROOT + '/images/rabbit.png',
},
{
currentCategory: 'unclassified',
category: 'weather',
name: 'snow',
image: SITE_ROOT + '/images/snow.png',
},
{
currentCategory: 'unclassified',
category: 'weather',
name: 'cloud',
image: SITE_ROOT + '/images/cloud.png',
},
{
currentCategory: 'unclassified',
category: 'weather',
name: 'rain',
image: SITE_ROOT + '/images/rain.png',
},
{
currentCategory: 'unclassified',
category: 'weather',
name: 'rainbow',
image: SITE_ROOT + '/images/rainbow.png',
},
{
currentCategory: 'unclassified',
category: 'weather',
name: 'wind',
image: SITE_ROOT + '/images/wind.png',
},
{
currentCategory: 'unclassified',
category: 'weather',
name: 'water',
image: SITE_ROOT + '/images/water.png',
},
{
currentCategory: 'unclassified',
category: 'emotion',
name: 'happy',
image: SITE_ROOT + '/images/happy.png',
},
{
currentCategory: 'unclassified',
category: 'emotion',
name: 'sad',
image: SITE_ROOT + '/images/sad.png',
},
{
currentCategory: 'unclassified',
category: 'emotion',
name: 'surprised',
image: SITE_ROOT + '/images/surprised.png',
},
{
currentCategory: 'unclassified',
category: 'emotion',
name: 'proud',
image: SITE_ROOT + '/images/proud.png',
},
{
currentCategory: 'unclassified',
category: 'emotion',
name: 'angry',
image: SITE_ROOT + '/images/angry.png',
},
{
currentCategory: 'unclassified',
category: 'emotion',
name: 'inlove',
image: SITE_ROOT + '/images/inlove.png',
},
{
currentCategory: 'unclassified',
category: 'shape',
name: 'circle',
image: SITE_ROOT + '/images/circle.png',
},
{
currentCategory: 'unclassified',
category: 'shape',
name: 'heart',
image: SITE_ROOT + '/images/heart.png',
},
{
currentCategory: 'unclassified',
category: 'shape',
name: 'cross',
image: SITE_ROOT + '/images/cross.png',
},
{
currentCategory: 'unclassified',
category: 'shape',
name: 'rectangle',
image: SITE_ROOT + '/images/rect.png',
},
{
currentCategory: 'unclassified',
category: 'shape',
name: 'star',
image: SITE_ROOT + '/images/star.png',
},
{
currentCategory: 'unclassified',
category: 'shape',
name: 'triangle',
image: SITE_ROOT + '/images/triangle.png',
},
];
export const groups = ['animal', 'weather', 'emotion', 'shape'];
data.forEach((item) => {
item.currentCategory = item.category;
});

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

.main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.sample-options {
flex-grow: 0;
flex-shrink: 0;
display: flex;
background: #fbfbfb;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
}
.grid {
width: calc(100% - 20px);
height: 100%;
flex-grow: 1;
flex-shrink: 1;
margin: 0 10px;
}
.card-layout .group-item-container {
overflow: hidden;
position: relative;
z-index: 1;
padding: 5px;
border-radius: 0;
}
.card-layout .group-item-container .group-item-container-inner {
border: 1px solid #ccc;
border-radius: 5px;
}
.card-layout .group-item-container .image-container {
height: 115px;
}
.card-layout .group-item-container .name-container {
font-size: 16px;
height: 25px;
text-align: center;
justify-content: center;
}
.flash-image {
height: 100%;
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.gc-trellis-row.gc-trellis-place-holder {
border: 1px solid #d3d3d3;
border-radius: 12px;
}
.correct-mark {
position: absolute;
left: 10px;
top: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 7px 5px 8px 5px;
border: 4px solid #27d7b1;
border-radius: 100%;
}
.correct-mark:after {
display: block;
content: "";
width: 10px;
height: 5px;
border: 4px solid #27d7b1;
border-top: none;
border-right: none;
background: transparent;
transform: rotate(-45deg);
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoQ2FyZExheW91dC9yZWFjdC9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9UcmVsbGlzL1RyZWxsaXNXaXRoQ2FyZExheW91dC9yZWFjdC9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7RUFDQSxjQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxnQkFBQTtFQUNBLGFBQUE7QUNDRjs7QURFQTtFQUNFLHdCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREdFO0VBQ0UsZ0JBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxZQUFBO0VBQ0EsZ0JBQUE7QUNBSjtBREVJO0VBQ0Usc0JBQUE7RUFDQSxrQkFBQTtBQ0FOO0FER0k7RUFDRSxhQUFBO0FDRE47QURJSTtFQUNFLGVBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSx1QkFBQTtBQ0ZOOztBRE9BO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSwyQkFBQTtFQUNBLDRCQUFBO0FDSkY7O0FET0E7RUFDRSx5QkFBQTtFQUNBLG1CQUFBO0FDSkY7O0FEV0E7RUFDRSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxTQUFBO0VBQ0EsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSx3QkFBQTtFQUNBLHlCQUFBO0VBQ0EsbUJBQUE7QUNSRjtBRFVFO0VBQ0UsY0FBQTtFQUNBLFdBQUE7RUFDQSxXQWpCYztFQWtCZCxXQWpCZTtFQWtCZix5QkFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSx1QkFBQTtFQUNBLHlCQUFBO0FDUkoiLCJmaWxlIjoiRGF0YVZpZXdzL1RyZWxsaXMvVHJlbGxpc1dpdGhDYXJkTGF5b3V0L3JlYWN0L3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAxMHB4O1xufVxuXG4uZ3JpZCB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBtYXJnaW46IDAgMTBweDtcbn1cblxuLmNhcmQtbGF5b3V0IHtcbiAgLmdyb3VwLWl0ZW0tY29udGFpbmVyIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuICAgIHBhZGRpbmc6IDVweDtcbiAgICBib3JkZXItcmFkaXVzOiAwO1xuXG4gICAgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7XG4gICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgfVxuXG4gICAgLmltYWdlLWNvbnRhaW5lciB7XG4gICAgICBoZWlnaHQ6IDExNXB4O1xuICAgIH1cblxuICAgIC5uYW1lLWNvbnRhaW5lciB7XG4gICAgICBmb250LXNpemU6IDE2cHg7XG4gICAgICBoZWlnaHQ6IDI1cHg7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cblxuLmZsYXNoLWltYWdlIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNXB4O1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogNXB4O1xufVxuXG4uZ2MtdHJlbGxpcy1yb3cuZ2MtdHJlbGxpcy1wbGFjZS1ob2xkZXIge1xuICBib3JkZXI6IDFweCBzb2xpZCAjZDNkM2QzO1xuICBib3JkZXItcmFkaXVzOiAxMnB4O1xufVxuXG4kY2hlY2ttYXJrLWNvbG9yOiAjMjdkN2IxO1xuJGNoZWNrbWFyay13aWR0aDogMTBweDtcbiRjaGVja21hcmstaGVpZ2h0OiA1cHg7XG5cbi5jb3JyZWN0LW1hcmsge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDEwcHg7XG4gIHRvcDogMTBweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDdweCA1cHggOHB4IDVweDtcbiAgYm9yZGVyOiA0cHggc29saWQgJGNoZWNrbWFyay1jb2xvcjtcbiAgYm9yZGVyLXJhZGl1czogMTAwJTtcblxuICAmOmFmdGVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBjb250ZW50OiAnJztcbiAgICB3aWR0aDogJGNoZWNrbWFyay13aWR0aDtcbiAgICBoZWlnaHQ6ICRjaGVja21hcmstaGVpZ2h0O1xuICAgIGJvcmRlcjogNHB4IHNvbGlkICRjaGVja21hcmstY29sb3I7XG4gICAgYm9yZGVyLXRvcDogbm9uZTtcbiAgICBib3JkZXItcmlnaHQ6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoLTQ1ZGVnKTtcbiAgfVxufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcGFkZGluZzogMTBweDtcbn1cblxuLmdyaWQge1xuICB3aWR0aDogY2FsYygxMDAlIC0gMjBweCk7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbiAgbWFyZ2luOiAwIDEwcHg7XG59XG5cbi5jYXJkLWxheW91dCAuZ3JvdXAtaXRlbS1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDE7XG4gIHBhZGRpbmc6IDVweDtcbiAgYm9yZGVyLXJhZGl1czogMDtcbn1cbi5jYXJkLWxheW91dCAuZ3JvdXAtaXRlbS1jb250YWluZXIgLmdyb3VwLWl0ZW0tY29udGFpbmVyLWlubmVyIHtcbiAgYm9yZGVyOiAxcHggc29saWQgI2NjYztcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xufVxuLmNhcmQtbGF5b3V0IC5ncm91cC1pdGVtLWNvbnRhaW5lciAuaW1hZ2UtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMTVweDtcbn1cbi5jYXJkLWxheW91dCAuZ3JvdXAtaXRlbS1jb250YWluZXIgLm5hbWUtY29udGFpbmVyIHtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBoZWlnaHQ6IDI1cHg7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59XG5cbi5mbGFzaC1pbWFnZSB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDVweDtcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDVweDtcbn1cblxuLmdjLXRyZWxsaXMtcm93LmdjLXRyZWxsaXMtcGxhY2UtaG9sZGVyIHtcbiAgYm9yZGVyOiAxcHggc29saWQgI2QzZDNkMztcbiAgYm9yZGVyLXJhZGl1czogMTJweDtcbn1cblxuLmNvcnJlY3QtbWFyayB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbGVmdDogMTBweDtcbiAgdG9wOiAxMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogN3B4IDVweCA4cHggNXB4O1xuICBib3JkZXI6IDRweCBzb2xpZCAjMjdkN2IxO1xuICBib3JkZXItcmFkaXVzOiAxMDAlO1xufVxuLmNvcnJlY3QtbWFyazphZnRlciB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBjb250ZW50OiBcIlwiO1xuICB3aWR0aDogMTBweDtcbiAgaGVpZ2h0OiA1cHg7XG4gIGJvcmRlcjogNHB4IHNvbGlkICMyN2Q3YjE7XG4gIGJvcmRlci10b3A6IG5vbmU7XG4gIGJvcmRlci1yaWdodDogbm9uZTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIHRyYW5zZm9ybTogcm90YXRlKC00NWRlZyk7XG59Il19 */

(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 Card Layout (React)