Skip to content

Commit 21e1998

Browse files
SasthaPrathapSasthaPrathap
authored
Merge pull request #1 from MeenaAlagiah/master
Adding Vue Pivot Table Filter and Sort sample
2 parents de11f1b + 458648b commit 21e1998

File tree

12 files changed

+1348
-1
lines changed

12 files changed

+1348
-1
lines changed

‎README.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# how-to-filter-and-sort-data-in-the-vue-pivottable-component
1+
# How to Filter and Sort Data in the Vue Pivot Table Component
22
A quick start Vue project that shows how to filter and sort data in the Pivot Table component. This project includes a code snippet for different types of filtering like label and value filtering, and different types of sorting like alphanumeric and value sorting.
3+
4+
Refer to the following documentation to learn about the Vue Pivot Table component:
5+
https://ej2.syncfusion.com/vue/documentation/pivotview/filtering
6+
https://ej2.syncfusion.com/vue/documentation/pivotview/sorting
7+
8+
Check out this online example of the Vue Pivot Table Component:
9+
https://ej2.syncfusion.com/vue/demos/#/material3/grid/sorting.html
10+
https://ej2.syncfusion.com/vue/demos/#/material3/grid/filtering.html
11+
12+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
13+
14+
### How to run this application?
15+
To run this application, you need to clone the `how-to-filter-and-sort-data-in-the-vue-pivottable-component` 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>

0 commit comments

Comments
 (0)