Skip to content

Commit 1400495

Browse files
authored
Merge pull request #1 from Sridhar-Karunakaran/main
987889: Updating the README file content
2 parents 7ca1cad + 15ea316 commit 1400495

File tree

1 file changed

+104
-8
lines changed

1 file changed

+104
-8
lines changed

README.md

Lines changed: 104 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,104 @@
1-
The sample demonstrates how to integrate the Syncfusion Pivot Table component into a Vue 3 application using the Vue CLI. The following features are shown in this sample.
2-
3-
1. Binding JSON data source.
4-
2. Defining fields from the bound data source to row, column, value and filter areas to render the entire Pivot Table component in a desired format.
5-
3. Adding height and width to the pivot table component.
6-
4. Enabling field list to add or remove and re-arrange the fields between different areas, including column, row, value, and filter along with filter and sort options dynamically at runtime.
7-
5. Enabling grouping bar that automatically populates fields from the bound data source and allows to drag fields between different areas such as columns, rows, values, and filters, and alter pivot table at runtime.
8-
6. Enabling calculated field to add a new calculated field based on the available fields from the bound data source using basic arithmetic operators at runtime.
1+
2+
# Syncfusion Vue Pivot Table – Getting Started Sample
3+
4+
This sample demonstrates how to **integrate the Syncfusion Pivot Table (PivotView) component** into a **Vue 3 application using Vue CLI**. It showcases key features such as field list, grouping bar, calculated fields, and custom formatting.
5+
6+
## 📖 Overview
7+
8+
The Syncfusion Pivot Table (PivotView) is a powerful component for summarizing and analyzing large datasets. This sample helps you get started with the Pivot Table in a Vue 3 project and demonstrates how to:
9+
10+
- Bind a JSON data source.
11+
- Configure rows, columns, values, and filters.
12+
- Set custom height and width for the Pivot Table.
13+
- Enable dynamic field manipulation using the Field List.
14+
- Use the Grouping Bar for drag-and-drop field arrangement.
15+
- Add calculated fields using basic arithmetic operations.
16+
17+
## 🚀 Getting Started
18+
19+
### Prerequisites
20+
21+
Before running this sample, ensure you have the following installed:
22+
23+
- [Node.js](https://nodejs.org/)
24+
- [Vue CLI](https://cli.vuejs.org/)
25+
26+
### Installation Steps
27+
28+
1. **Clone the repository:**
29+
```bash
30+
git clone https://github.com/SyncfusionExamples/vue3-pivottable-getting-started
31+
cd vue3-pivottable-getting-started
32+
```
33+
34+
2. **Install dependencies:**
35+
```bash
36+
npm install
37+
```
38+
39+
3. **Run the application:**
40+
```bash
41+
npm run serve
42+
```
43+
44+
4. **Open in browser:**
45+
Navigate to `http://localhost:8080` to view the Pivot Table in action.
46+
47+
## 🔧 Key Features Demonstrated
48+
49+
1. **JSON Data Binding:**
50+
The Pivot Table is populated using a local JSON array containing sales data.
51+
52+
2. **Field Configuration:**
53+
- **Rows:** `Country`
54+
- **Columns:** `Year`
55+
- **Values:** `Amount`, `Total` (calculated field)
56+
57+
3. **Calculated Fields:**
58+
A new field `Total` is added using the formula:
59+
```js
60+
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
61+
```
62+
63+
4. **Field List:**
64+
Allows users to dynamically add, remove, and rearrange fields at runtime.
65+
66+
5. **Grouping Bar:**
67+
Enables drag-and-drop interaction for customizing the Pivot Table layout.
68+
69+
6. **Formatting:**
70+
Currency formatting is applied to the `Amount` field:
71+
```js
72+
formatSettings: [{ name: 'Amount', format: 'C1' }]
73+
```
74+
75+
## 📂 Project Structure
76+
77+
```
78+
vue3-pivottable-getting-started/
79+
├─ public/
80+
│ ├─ favicon.ico
81+
│ └─ index.html
82+
├─ src/
83+
│ ├─ assets/
84+
│ │ └─ logo.png
85+
│ ├─ App.vue
86+
│ └─ main.js
87+
├─ README.md
88+
├─ package.json
89+
└─ babel.config.js
90+
```
91+
92+
## 📚 Learn More
93+
94+
- [Syncfusion Vue Pivot Table Documentation](https://ej2.syncfusion.com/vue/documentation/pivotview/getting-started/)
95+
- [Syncfusion Vue Pivot Table Demos](https://ej2.syncfusion.com/vue/demos/#/material3/pivot-table/overview)
96+
97+
## 💬 Support
98+
99+
For questions or feedback, visit the [Syncfusion Support Portal](https://support.syncfusion.com) or [Community Forums](https://www.syncfusion.com/forums).
100+
101+
## 📜 License
102+
103+
This is a commercial product and requires a valid Syncfusion license.
104+
[View License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf)

0 commit comments

Comments
 (0)