Skip to content

Commit a756ab1

Browse files
SasthaPrathapSasthaPrathap
authored
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Pivot Table Row and Column sample
2 parents d1b768c + cf795cc commit a756ab1

File tree

11 files changed

+362
-2
lines changed

11 files changed

+362
-2
lines changed

‎README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
1-
# how-to-customize-rows-and-columns-in-a-vue-pivot-table
2-
A quick start Vue project that shows how to customize rows and columns in the Pivot Table Component. This project includes a code snippet for customizing the row height, column width, and gridlines. It also includes a code snippet for displaying the cell content using clip mode and textwrapping properties.
1+
# How to Customize Rows and Columns in a Vue Pivot Table
2+
A quick start Vue project that shows how to customize rows and columns in the Pivot Table Component. This project includes a code snippet for customizing the row height, column width, and gridlines. It also includes a code snippet for displaying the cell content using clip mode and textwrapping properties.
3+
4+
Refer to the following documentation to learn about the Vue Pivot Table component:
5+
https://ej2.syncfusion.com/vue/documentation/pivotview/row-and-column
6+
7+
Check out this online example of the Vue Pivot Table Component:
8+
https://ej2.syncfusion.com/vue/demos/#/material3/pivot-table/selection.html
9+
10+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
11+
12+
### How to run this application?
13+
To run this application, you need to clone the `how-to-customize-rows-and-columns-in-a-vue-pivot-table` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command.

‎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: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<script>
2+
import { PivotViewComponent, GroupingBar } from "@syncfusion/ej2-vue-pivotview";
3+
4+
export default{
5+
components: {
6+
"ejs-pivotview": PivotViewComponent
7+
},
8+
data()
9+
{
10+
return{
11+
dataSourceSettings:{
12+
dataSource:[
13+
{ Amount: 5100, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 21, State: "Alberta" },
14+
{ Amount: 1900, Country: "France", Date: "FY 2007", Product: "Bike", Quantity: 23, State: "Alberta" },
15+
{ Amount: 1000, Country: "Sweden", Date: "FY 2008", Product: "Car", Quantity: 29, State: "Alberta" },
16+
{ Amount: 2060, Country: "Canada", Date: "FY 2006", Product: "Bike", Quantity: 93, State: "British Columbia" },
17+
{ Amount: 6200, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 36, State: "British Columbia" },
18+
{ Amount: 2000, Country: "Sweden", Date: "FY 2008", Product: "Bike", Quantity: 31, State: "British Columbia" },
19+
{ Amount: 1300, Country: "Canada", Date: "FY 2005", Product: "Car", Quantity: 45, State: "Brunswick" },
20+
{ Amount: 3400, Country: "France", Date: "FY 2006", Product: "Bike", Quantity: 47, State: "Brunswick" },
21+
{ Amount: 2300, Country: "Sweden", Date: "FY 2007", Product: "Car", Quantity: 43, State: "Brunswick" },
22+
{ Amount: 5150, Country: "Canada", Date: "FY 2006", Product: "Bike", Quantity: 21, State: "Alberta" },
23+
{ Amount: 1970, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 23, State: "Alberta" },
24+
{ Amount: 1030, Country: "Sweden", Date: "FY 2008", Product: "Bike", Quantity: 29, State: "Alberta" },
25+
{ Amount: 2000, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 93, State: "British Columbia" },
26+
{ Amount: 6250, Country: "France", Date: "FY 2007", Product: "Bike", Quantity: 36, State: "British Columbia" },
27+
{ Amount: 2020, Country: "Sweden", Date: "FY 2008", Product: "Car", Quantity: 31, State: "British Columbia" },
28+
{ Amount: 1390, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 45, State: "Brunswick" },
29+
{ Amount: 3460, Country: "France", Date: "FY 2006", Product: "Car", Quantity: 47, State: "Brunswick" },
30+
{ Amount: 2380, Country: "Sweden", Date: "FY 2007", Product: "Bike", Quantity: 43, State: "Brunswick" },
31+
],
32+
rows: [{name:'Country'}, {name:'Product'}],
33+
columns: [{name:'Date'}],
34+
values: [{name:'Amount'}, {name:'Quantity'}],
35+
formatSettings: [{name:'Amount', format:'C1'}],
36+
},
37+
38+
height:'350px',
39+
width:'900px',
40+
showGroupingBar: true,
41+
gridSettings:{
42+
clipMode :'EllipsisWithTooltip',
43+
allowTextWrap: true,
44+
allowSelection: true,
45+
selectionSettings:{
46+
mode: 'Cell',
47+
type:'multiple'
48+
},
49+
gridLines:'Vertical'
50+
}
51+
};
52+
} ,
53+
provide:
54+
{
55+
pivotview:[GroupingBar]
56+
}
57+
}
58+
</script>
59+
60+
<template>
61+
<ejs-pivotview :height="height" :width="width"
62+
:dataSourceSettings="dataSourceSettings"
63+
:showGroupingBar ="showGroupingBar"
64+
:gridSettings="gridSettings"></ejs-pivotview>
65+
</template>
66+
67+
<style >
68+
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
69+
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
70+
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
71+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
72+
@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
73+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
74+
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
75+
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
76+
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
77+
@import "../node_modules/@syncfusion/ej2-grids/styles/bootstrap5.css";
78+
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/bootstrap5.css";
79+
</style>
80+
81+

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import {registerLicense} from '@syncfusion/ej2-base';
5+
registerLicense("ORg4AjUWIQA/Gnt2V1hhQlJCfVhdXGpWfFN0RnNedVx2flRCcC0sT3RfQF5jTn5UdkJhXnpWcH1cQA==");
6+
createApp(App).mount('#app')

‎src/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)