Skip to content

Commit 66803f5

Browse files
MeenaAlagiahMeenaAlagiah
authored
Committing the Cell Template sample in Vue Pivot Table
1 parent 47cb830 commit 66803f5

File tree

11 files changed

+437
-2
lines changed

11 files changed

+437
-2
lines changed

‎README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
# customize-the-appearance-of-a-vue-pivot-table-using-templates-and-conditional-formatting
2-
A quick start Vue project that shows how to display profit, loss and neutral icons to the pivot table cells using templates. This project also includes a code snippet for customizing the appearance of the value cells using the conditional formatting.
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

‎alphanumeric_data.js

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
define(["require", "exports"], function (require, exports) {
2+
"use strict";
3+
Object.defineProperty(exports, "__esModule", { value: true });
4+
5+
exports.alphanumeric_data = [
6+
{
7+
"ProductID": "618-XW",
8+
"Country": "Canada",
9+
"Sold": 90,
10+
"Amount": 9219069
11+
},
12+
{
13+
"ProductID": "1111-GQ",
14+
"Sold": 37,
15+
"Amount": 1571126,
16+
"Country": "Australia"
17+
},
18+
{
19+
"ProductID": "330-BR",
20+
"Sold": 31,
21+
"Amount": 9523258,
22+
"Country": "Germany"
23+
},
24+
{
25+
"ProductID": "1035-VC",
26+
"Sold": 86,
27+
"Amount": 1004572,
28+
"Country": "United States"
29+
},
30+
{
31+
"ProductID": "36-SW",
32+
"Sold": 73,
33+
"Amount": 4532163,
34+
"Country": "United Kingdom"
35+
},
36+
{
37+
"ProductID": "71-AJ",
38+
"Sold": 45,
39+
"Amount": 1916052,
40+
"Country": "Germany"
41+
},
42+
{
43+
"ProductID": "980-PP",
44+
"Sold": 85,
45+
"Amount": 6586156,
46+
"Country": "Canada"
47+
},
48+
{
49+
"ProductID": "209-FB",
50+
"Sold": 51,
51+
"Amount": 6348087,
52+
"Country": "Australia"
53+
},
54+
{
55+
"ProductID": "428-PL",
56+
"Sold": 65,
57+
"Amount": 1365854,
58+
"Country": "Germany"
59+
},
60+
{
61+
"ProductID": "618-XW",
62+
"Sold": 81,
63+
"Amount": 6461768,
64+
"Country": "United States"
65+
},
66+
{
67+
"ProductID": "1111-GQ",
68+
"Sold": 33,
69+
"Amount": 6181560,
70+
"Country": "United Kingdom"
71+
},
72+
{
73+
"ProductID": "330-BR",
74+
"Sold": 17,
75+
"Amount": 611364,
76+
"Country": "Germany"
77+
},
78+
{
79+
"ProductID": "1035-VC",
80+
"Sold": 41,
81+
"Amount": 3688930,
82+
"Country": "Canada"
83+
},
84+
{
85+
"ProductID": "36-SW",
86+
"Sold": 51,
87+
"Amount": 4648920,
88+
"Country": "Australia"
89+
},
90+
{
91+
"ProductID": "71-AJ",
92+
"Sold": 56,
93+
"Amount": 4579862,
94+
"Country": "Germany"
95+
},
96+
{
97+
"ProductID": "980-PP",
98+
"Sold": 25,
99+
"Amount": 1249117,
100+
"Country": "United States"
101+
},
102+
{
103+
"ProductID": "209-FB",
104+
"Sold": 60,
105+
"Amount": 9603891,
106+
"Country": "United Kingdom"
107+
},
108+
{
109+
"ProductID": "428-PL",
110+
"Sold": 31,
111+
"Amount": 9548655,
112+
"Country": "Canada"
113+
},
114+
{
115+
"ProductID": "618-XW",
116+
"Sold": 93,
117+
"Amount": 7496742,
118+
"Country": "Australia"
119+
},
120+
{
121+
"ProductID": "1111-GQ",
122+
"Sold": 62,
123+
"Amount": 8692814,
124+
"Country": "Germany"
125+
},
126+
{
127+
"ProductID": "330-BR",
128+
"Sold": 22,
129+
"Amount": 4789234,
130+
"Country": "United States"
131+
},
132+
{
133+
"ProductID": "1035-VC",
134+
"Sold": 61,
135+
"Amount": 7927531,
136+
"Country": "United Kingdom"
137+
},
138+
{
139+
"ProductID": "36-SW",
140+
"Sold": 68,
141+
"Amount": 5440025,
142+
"Country": "Germany"
143+
},
144+
{
145+
"ProductID": "71-AJ",
146+
"Sold": 87,
147+
"Amount": 8097913,
148+
"Country": "Canada"
149+
},
150+
{
151+
"ProductID": "980-PP",
152+
"Sold": 87,
153+
"Amount": 1809071,
154+
"Country": "Australia"
155+
},
156+
{
157+
"ProductID": "209-FB",
158+
"Sold": 96,
159+
"Amount": 9893092,
160+
"Country": "Germany"
161+
},
162+
{
163+
"ProductID": "428-PL",
164+
"Sold": 22,
165+
"Amount": 8136252,
166+
"Country": "United States"
167+
},
168+
{
169+
"ProductID": "618-XW",
170+
"Sold": 29,
171+
"Amount": 9190577,
172+
"Country": "United Kingdom"
173+
},
174+
{
175+
"ProductID": "1111-GQ",
176+
"Sold": 85,
177+
"Amount": 5410172,
178+
"Country": "Germany"
179+
}
180+
];
181+
});

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-pivotview": "^22.1.36",
13+
"vue": "^3.2.47"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.1.0",
17+
"vite": "^4.3.9"
18+
}
19+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<script>
2+
import { PivotViewComponent, GroupingBar, Toolbar, ConditionalFormatting } from "@syncfusion/ej2-vue-pivotview";
3+
import { createApp } from 'vue';
4+
const app = createApp();
5+
var templateVue = app.component("cellTemplate",{
6+
data()
7+
{
8+
return{
9+
data:{}
10+
};
11+
},
12+
methods:{
13+
getCellContent: function(e){
14+
var template;
15+
if(e && e.cellInfo && e.cellInfo.axis == 'value'){
16+
if(e.cellInfo.actualValue < 1000)
17+
{
18+
template = '<div class="icon-loss"></div>'
19+
}
20+
else if (e.cellInfo.actualValue > 1000 && e.cellInfo.actualValue < 5000) {
21+
template = '<div class=" icon-neutral "></div>';
22+
} else if (e.cellInfo.actualValue > 5000) {
23+
template = '<div class="icon-profit"></div>';
24+
}
25+
else{
26+
template=''
27+
}
28+
}
29+
else{
30+
template=''
31+
}
32+
return template;
33+
}
34+
},
35+
template: `<div v-if="getCellContent(data) !== ''">
36+
<div v-html="getCellContent(data)"></div>
37+
</div>`,
38+
});
39+
40+
export default{
41+
components: {
42+
"ejs-pivotview": PivotViewComponent
43+
},
44+
data()
45+
{
46+
return{
47+
dataSourceSettings:{
48+
dataSource:[
49+
{ Amount: 5100, Country: "Canada", Date: "FY 2006", Quarter: "Q1", Product: "Car", Quantity: 21, State: "Alberta" },
50+
{ Amount: 1900, Country: "France", Date: "FY 2007", Quarter: "Q2", Product: "Bike", Quantity: 23, State: "Alberta" },
51+
{ Amount: 1000, Country: "Sweden", Date: "FY 2008", Quarter: "Q3", Product: "Car", Quantity: 29, State: "Alberta" },
52+
{ Amount: 2060, Country: "Canada", Date: "FY 2006", Quarter: "Q4", Product: "Bike", Quantity: 93, State: "British Columbia" },
53+
{ Amount: 6200, Country: "France", Date: "FY 2007", Quarter: "Q1", Product: "Car", Quantity: 36, State: "British Columbia" },
54+
{ Amount: 2000, Country: "Sweden", Date: "FY 2008", Quarter: "Q2", Product: "Bike", Quantity: 31, State: "British Columbia" },
55+
{ Amount: 1300, Country: "Canada", Date: "FY 2005", Quarter: "Q3", Product: "Car", Quantity: 45, State: "Brunswick" },
56+
{ Amount: 3400, Country: "France", Date: "FY 2006", Quarter: "Q4", Product: "Bike", Quantity: 47, State: "Brunswick" },
57+
{ Amount: 2300, Country: "Sweden", Date: "FY 2007", Quarter: "Q1", Product: "Car", Quantity: 43, State: "Brunswick" },
58+
{ Amount: 5100, Country: "Canada", Date: "FY 2006", Quarter: "Q2", Product: "Bike", Quantity: 21, State: "Alberta" },
59+
{ Amount: 1900, Country: "France", Date: "FY 2007", Quarter: "Q3", Product: "Car", Quantity: 23, State: "Alberta" },
60+
{ Amount: 1000, Country: "Sweden", Date: "FY 2008", Quarter: "Q4", Product: "Bike", Quantity: 29, State: "Alberta" },
61+
{ Amount: 2060, Country: "Canada", Date: "FY 2006", Quarter: "Q1", Product: "Car", Quantity: 93, State: "British Columbia" },
62+
{ Amount: 6200, Country: "France", Date: "FY 2007", Quarter: "Q2", Product: "Bike", Quantity: 36, State: "British Columbia" },
63+
{ Amount: 2000, Country: "Sweden", Date: "FY 2008", Quarter: "Q3", Product: "Car", Quantity: 31, State: "British Columbia" },
64+
{ Amount: 1300, Country: "Canada", Date: "FY 2005", Quarter: "Q4", Product: "Bike", Quantity: 45, State: "Brunswick" },
65+
{ Amount: 3400, Country: "France", Date: "FY 2006", Quarter: "Q1", Product: "Car", Quantity: 47, State: "Brunswick" },
66+
{ Amount: 2300, Country: "Sweden", Date: "FY 2007", Quarter: "Q2", Product: "Bike", Quantity: 43, State: "Brunswick" },
67+
],
68+
rows: [{name:'Country'},{name: 'Product'}],
69+
columns: [{name:'Date'}],
70+
values: [{name:'Amount'}, {name:'Quantity', caption:'Units Sold'}],
71+
formatSettings: [{name:'Amount', format:'C1'}],
72+
conditionalFormatSettings:[
73+
{
74+
75+
value1:3000,
76+
conditions:'LessThan',
77+
style:{
78+
backgroundColor: '#80cbc4',
79+
color: 'black',
80+
fontFamily: 'Tahoma',
81+
fontSize: '12px'
82+
}
83+
}
84+
]
85+
},
86+
height:'350px',
87+
width:'900px',
88+
showGroupingBar: true,
89+
showToolbar: true,
90+
allowConditionalFormatting: true,
91+
toolbar: ["ConditionalFormatting"],
92+
cellTemplate: function()
93+
{
94+
return{
95+
template: templateVue
96+
};
97+
}
98+
}},
99+
provide:
100+
{
101+
pivotview:[ GroupingBar, Toolbar, ConditionalFormatting ]
102+
}
103+
}
104+
</script>
105+
<template>
106+
<ejs-pivotview :height="height" :width="width"
107+
:dataSourceSettings="dataSourceSettings"
108+
:showGroupingBar ="showGroupingBar"
109+
:cellTemplate="cellTemplate"
110+
:showToolbar="showToolbar"
111+
:allowConditionalFormatting="allowConditionalFormatting"
112+
:toolbar="toolbar"
113+
></ejs-pivotview>
114+
</template>
115+
116+
<style >
117+
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
118+
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
119+
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
120+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
121+
@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
122+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
123+
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
124+
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
125+
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
126+
@import "../node_modules/@syncfusion/ej2-grids/styles/bootstrap5.css";
127+
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/bootstrap5.css";
128+
.icon-neutral {
129+
display: inline-block !important;
130+
width: 0;
131+
height: 0;
132+
border-top: 5px solid transparent;
133+
border-bottom: 5px solid transparent;
134+
border-left: 5px solid blue;
135+
margin-left: 10px;
136+
}
137+
.icon-loss {
138+
display: inline-block !important;
139+
width: 0;
140+
height: 0;
141+
border-left: 5px solid transparent;
142+
border-right: 5px solid transparent;
143+
border-top: 5px solid #f00;
144+
margin-left: 10px;
145+
}
146+
.icon-profit {
147+
display: inline-block !important;
148+
width: 0;
149+
height: 0;
150+
border-left: 5px solid transparent;
151+
border-right: 5px solid transparent;
152+
border-bottom: 5px solid darkgreen;
153+
margin-left: 10px;
154+
}
155+
</style>
156+
157+

‎src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)