|
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