Multiple Row | Features | MESCIUS DataViewsJS Vue Demos

This example demonstrates how easy it is to define a row template with HTML syntax. In the example a template has been defined to present data rows on multiple lines. As you can see in the code, you can define the template in the <template> tag with nested <div> tags. You apply this template to the view by specifying a unique id in the template tag (rowTmpl in this example) and referring to it in the grid options object by adding the prefix '#'.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/RowTemplates/MultipleRow/vue/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, template, row template, rowtemplate" />
<meta
name="description"
content="This example demonstrates how easy it is to define a row template with HTML syntax.  In the example a template has been defined to present data rows on multiple lines."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiple Row | Features | 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&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>
<template id="rowTmpl" style="display: none" type="text/dataView-template">
<div style="height: 100%">
<div
class="gc-cell gc-cell-border"
style="
display: inline-block;
vertical-align: top;
width: 80px;
height: 100px;
line-height: 100px;
text-align: center;
"
data-column="id"
data-taborder="0"
></div>
<div style="display: inline-block; vertical-align: top; height: 100%" data-column-group>
<div style="height: 33px; line-height: 33px" data-column-group>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; width: 200px; height: 100%; line-height: 33px"
data-column="name"
data-taborder="1"
></div>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; width: 187px; height: 100%; line-height: 33px"
data-column="sku"
data-taborder="2"
></div>
</div>
<div style="height: 34px; line-height: 34px" data-column-group>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; line-height: 34px; height: 100%; width: 200px"
data-column="quantityPerUnit"
data-taborder="3"
></div>
<div
class="gc-cell gc-cell-border"
style="display: inline-block; line-height: 34px; height: 100%; width: 187px; text-align: left"
data-column="price"
data-taborder="4"
></div>
</div>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 387px"
data-column="description"
data-taborder="5"
></div>
</div>
<div style="display: inline-block; vertical-align: top; height: 100%" data-column-group>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 120px; text-align: center"
data-column="inStock"
data-taborder="6"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 34px; line-height: 34px; width: 120px; text-align: center"
data-column="reorderLevel"
data-taborder="7"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 120px; text-align: center"
data-column="unitsOnOrder"
data-taborder="8"
></div>
</div>
<div style="display: inline-block; vertical-align: top; height: 100%" data-column-group>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 200px"
data-column="supplier"
data-taborder="9"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 34px; line-height: 34px; width: 200px"
data-column="location"
data-taborder="10"
></div>
<div
class="gc-cell gc-cell-border"
style="height: 33px; line-height: 33px; width: 200px"
data-column="telephone"
data-taborder="11"
></div>
</div>
<div
class="gc-cell gc-cell-border"
style="
display: inline-block;
vertical-align: top;
height: 100px;
line-height: 100px;
width: 110px;
text-align: center;
"
data-column="discontinued"
data-taborder="12"
></div>
</div>
</template>
<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" :autoFocus="true" />
</template>
<script>
import Vue from 'vue';
import '@grapecity/dataviews.vue';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data } from './data';
const colFormatter = '<span>{{? it.discontinued}}✔{{??}}✖{{?}}</span>';
const cols = [
{ id: 'id', caption: 'ID', dataField: 'ProductID' },
{ id: 'name', caption: 'Name', dataField: 'ProductName' },
{ id: 'sku', caption: 'Category', dataField: 'Category.CategoryName' },
{
id: 'description',
caption: 'Description',
dataField: 'Category.Description',
},
{
id: 'quantityPerUnit',
caption: 'Quantity Per Unit',
dataField: 'QuantityPerUnit',
},
{ id: 'inStock', caption: 'In Stock', dataField: 'UnitsInStock' },
{ id: 'price', caption: 'Unit Price', dataField: 'UnitPrice' },
{
id: 'discontinued',
caption: 'Discontinued',
dataField: 'Discontinued',
presenter: colFormatter,
},
{ id: 'reorderLevel', caption: 'Reorder Level', dataField: 'ReorderLevel' },
{
id: 'unitsOnOrder',
caption: 'Units on order',
dataField: 'UnitsOnOrder',
},
{ id: 'supplier', caption: 'Supplier', dataField: 'Supplier.CompanyName' },
{ id: 'location', caption: 'Address', dataField: 'Supplier.Address' },
{ id: 'telephone', caption: 'Telephone', dataField: 'Supplier.Telephone' },
];
const layout = new GridLayout({
rowHeight: 100,
colHeaderHeight: 100,
rowTemplate: '#rowTmpl',
});
new Vue({
el: '#root',
data: { data, cols, layout },
});
</script>

export const data = [
{
ProductID: 1,
ProductName: 'Chai',
QuantityPerUnit: '10 boxes x 20 bags',
UnitPrice: 18.0,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryId: 1,
CategoryName: 'Beverages',
Description: 'Soft drinks, coffees, teas, beers, and ales',
},
Supplier: {
CompanyName: 'Exotic Liquids',
Address: '6649 N Blue Gum St',
Telephone: '504-621-8927',
},
},
{
ProductID: 2,
ProductName: 'Chang',
QuantityPerUnit: '24 - 12 oz bottles',
UnitPrice: 19.0,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryId: 1,
CategoryName: 'Beverages',
Description: 'Soft drinks, coffees, teas, beers, and ales',
},
Supplier: {
CompanyName: 'Exotic Liquids',
Address: '6649 N Blue Gum St',
Telephone: '504-621-8927',
},
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
QuantityPerUnit: '12 - 550 ml bottles',
UnitPrice: 10.0,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: 'Exotic Liquids',
Address: '6649 N Blue Gum St',
Telephone: '504-621-8927',
},
},
{
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
QuantityPerUnit: '48 - 6 oz jars',
UnitPrice: 22.0,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: 'New Orleans Cajun Delights',
Address: '4 B Blue Ridge Blvd',
Telephone: '810-292-9388',
},
},
{
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
QuantityPerUnit: '36 boxes',
UnitPrice: 21.35,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: 'New Orleans Cajun Delights',
Address: '4 B Blue Ridge Blvd',
Telephone: '810-292-9388',
},
},
{
ProductID: 6,
ProductName: "Grandma's Boysenberry Spread",
QuantityPerUnit: '12 - 8 oz jars',
UnitPrice: 25.0,
UnitsInStock: 120,
UnitsOnOrder: 0,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: "Grandma Kelly's Homestead",
Address: '8 W Cerritos Ave #54',
Telephone: '856-636-8749',
},
},
{
ProductID: 7,
ProductName: "Uncle Bob's Organic Dried Pears",
QuantityPerUnit: '12 - 1 lb pkgs.',
UnitPrice: 30.0,
UnitsInStock: 15,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryId: 3,
CategoryName: 'Produce',
Description: 'Dried fruit and bean curd',
},
Supplier: {
CompanyName: "Grandma Kelly's Homestead",
Address: '8 W Cerritos Ave #54',
Telephone: '856-636-8749',
},
},
{
ProductID: 8,
ProductName: 'Northwoods Cranberry Sauce',
QuantityPerUnit: '12 - 12 oz jars',
UnitPrice: 40.0,
UnitsInStock: 6,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: "Grandma Kelly's Homestead",
Address: '8 W Cerritos Ave #54',
Telephone: '856-636-8749',
},
},
{
ProductID: 9,
ProductName: 'Mishi Kobe Niku',
QuantityPerUnit: '18 - 500 g pkgs.',
UnitPrice: 97.0,
UnitsInStock: 29,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryId: 4,
CategoryName: 'Meat/Poultry',
Description: 'Prepared meats',
},
Supplier: {
CompanyName: 'Tokyo Traders',
Address: '3 Mcauley Dr',
Telephone: '419-503-2484',
},
},
{
ProductID: 10,
ProductName: 'Ikura',
QuantityPerUnit: '12 - 200 ml jars',
UnitPrice: 31.0,
UnitsInStock: 31,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 5,
CategoryName: 'Seafood',
Description: 'Seaweed and fish',
},
Supplier: {
CompanyName: 'Tokyo Traders',
Address: '3 Mcauley Dr',
Telephone: '419-503-2484',
},
},
{
ProductID: 11,
ProductName: 'Queso Cabrales',
QuantityPerUnit: '1 kg pkg.',
UnitPrice: 21.0,
UnitsInStock: 22,
UnitsOnOrder: 30,
ReorderLevel: 30,
Discontinued: false,
Category: {
CategoryId: 6,
CategoryName: 'Dairy Products',
Description: 'Cheeses',
},
Supplier: {
CompanyName: "Cooperativa de Quesos 'Las Cabras'",
Address: '322 New Horizon Blvd',
Telephone: '414-661-9598',
},
},
{
ProductID: 12,
ProductName: 'Queso Manchego La Pastora',
QuantityPerUnit: '10 - 500 g pkgs.',
UnitPrice: 38.0,
UnitsInStock: 86,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 6,
CategoryName: 'Dairy Products',
Description: 'Cheeses',
},
Supplier: {
CompanyName: "Cooperativa de Quesos 'Las Cabras'",
Address: '322 New Horizon Blvd',
Telephone: '414-661-9598',
},
},
{
ProductID: 13,
ProductName: 'Konbu',
QuantityPerUnit: '2 kg box',
UnitPrice: 6.0,
UnitsInStock: 24,
UnitsOnOrder: 0,
ReorderLevel: 5,
Discontinued: false,
Category: {
CategoryId: 5,
CategoryName: 'Seafood',
Description: 'Seaweed and fish',
},
Supplier: {
CompanyName: "Mayumi's",
Address: '6 S 33rd St',
Telephone: '610-545-3615',
},
},
{
ProductID: 14,
ProductName: 'Tofu',
QuantityPerUnit: '40 - 100 g pkgs.',
UnitPrice: 23.25,
UnitsInStock: 35,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 3,
CategoryName: 'Produce',
Description: 'Dried fruit and bean curd',
},
Supplier: {
CompanyName: "Mayumi's",
Address: '6 S 33rd St',
Telephone: '610-545-3615',
},
},
{
ProductID: 15,
ProductName: 'Genen Shouyu',
QuantityPerUnit: '24 - 250 ml bottles',
UnitPrice: 15.5,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 5,
Discontinued: false,
Category: {
CategoryId: 2,
CategoryName: 'Condiments',
Description: 'Sweet and savory sauces, relishes, spreads, and seasonings',
},
Supplier: {
CompanyName: "Mayumi's",
Address: '6 S 33rd St',
Telephone: '610-545-3615',
},
},
{
ProductID: 16,
ProductName: 'Pavlova',
QuantityPerUnit: '32 - 500 g boxes',
UnitPrice: 17.45,
UnitsInStock: 29,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryId: 8,
CategoryName: 'Confections',
Description: 'Desserts, candies, and sweet breads',
},
Supplier: {
CompanyName: 'Pavlova, Ltd.',
Address: '86 Nw 66th St #8673',
Telephone: '913-388-2079',
},
},
{
ProductID: 17,
ProductName: 'Alice Mutton',
QuantityPerUnit: '20 - 1 kg tins',
UnitPrice: 39.0,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryId: 4,
CategoryName: 'Meat/Poultry',
Description: 'Prepared meats',
},
Supplier: {
CompanyName: 'Pavlova, Ltd.',
Address: '86 Nw 66th St #8673',
Telephone: '913-388-2079',
},
},
{
ProductID: 18,
ProductName: 'Carnarvon Tigers',
QuantityPerUnit: '16 kg pkg.',
UnitPrice: 62.5,
UnitsInStock: 42,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 5,
CategoryName: 'Seafood',
Description: 'Seaweed and fish',
},
Supplier: {
CompanyName: 'Pavlova, Ltd.',
Address: '86 Nw 66th St #8673',
Telephone: '913-388-2079',
},
},
{
ProductID: 19,
ProductName: 'Teatime Chocolate Biscuits',
QuantityPerUnit: '10 boxes x 12 pieces',
UnitPrice: 9.2,
UnitsInStock: 25,
UnitsOnOrder: 0,
ReorderLevel: 5,
Discontinued: false,
Category: {
CategoryId: 8,
CategoryName: 'Confections',
Description: 'Desserts, candies, and sweet breads',
},
Supplier: {
CompanyName: 'Specialty Biscuits, Ltd.',
Address: '74874 Atlantic Ave',
Telephone: '614-801-9788',
},
},
{
ProductID: 20,
ProductName: "Sir Rodney's Marmalade",
QuantityPerUnit: '30 gift boxes',
UnitPrice: 81.0,
UnitsInStock: 40,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryId: 8,
CategoryName: 'Confections',
Description: 'Desserts, candies, and sweet breads',
},
Supplier: {
CompanyName: 'Specialty Biscuits, Ltd.',
Address: '74874 Atlantic Ave',
Telephone: '614-801-9788',
},
},
];

.gc-row .c0 {
font-size: 25px;
}
.gc-row {
font-size: 12px;
}
.gc-row .c1 {
font-weight: bold;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9NdWx0aXBsZVJvdy92dWUvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dUZW1wbGF0ZXMvTXVsdGlwbGVSb3cvdnVlL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxlQUFBO0FDQ0Y7O0FERUE7RUFDRSxlQUFBO0FDQ0Y7O0FERUE7RUFDRSxpQkFBQTtBQ0NGIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9NdWx0aXBsZVJvdy92dWUvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5nYy1yb3cgLmMwIHtcbiAgZm9udC1zaXplOiAyNXB4O1xufVxuXG4uZ2Mtcm93IHtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuXG4uZ2Mtcm93IC5jMSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuIiwiLmdjLXJvdyAuYzAge1xuICBmb250LXNpemU6IDI1cHg7XG59XG5cbi5nYy1yb3cge1xuICBmb250LXNpemU6IDEycHg7XG59XG5cbi5nYy1yb3cgLmMxIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59Il19 */

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

Multiple Row (Vue)