diff --git a/README.md b/README.md index beceee5..b1af3c3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,117 @@ -The sample demonstrates how to integrate the Syncfusion Pivot Table component with cell template into a Vue 3 application using the Vue CLI. The following features are shown in this sample. -1. Binding JSON data source. -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. -3. Adding height and width to the pivot table component. -4. Customizing the pivot table cell elements using cell template option. +# Syncfusion Vue 3 Pivot Table – Cell Template Example + +This sample demonstrates how to integrate the **Syncfusion Pivot Table (PivotView)** component with a cell template in a Vue 3 application using the Vue CLI. It showcases how to customize pivot table cells with icons to indicate trends (profit/loss) based on data comparisons. + +## 📖 Overview + +The Syncfusion Pivot Table is a powerful component for summarizing and visualizing data in a tabular format. This example illustrates: + +- Binding a JSON data source to the Pivot Table. +- Configuring rows, columns, values, and calculated fields for data analysis. +- Setting the Pivot Table's height and width for better layout control. +- Using a **cell template** to add custom icons (neutral, profit, or loss) to pivot table cells based on data trends. + +The sample uses Vue 3 and the Vue CLI to create a modern, modular application. The Pivot Table is styled with the Syncfusion Material theme for a clean, professional look. + +## ✅ Key Features in This Sample + +- **JSON Data Binding:** + The Pivot Table is populated with a JSON dataset containing fields like `Country`, `Year`, `Sold`, and `Amount`. + ```javascript + dataSource: [ + { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' }, + { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' } + ] + ``` +- **Pivot Table Configuration:** + - **Rows:** `Country` + - **Columns:** `Year` + - **Values:** `Amount` and a calculated field `Total` (sum of `Amount` and `Sold`). + - **Formatting:** Currency format (`C1`) applied to the `Amount` field. +- **Cell Template:** + A custom Vue component (`cellTemplate`) adds icons to cells, with logic in the `trend` method to dynamically update icons based on value comparisons (e.g., profit or loss). + ```javascript + template: `` + ``` +- **Responsive Design:** + The Pivot Table is styled with a fixed height (`350px`) and full width (`100%`) for responsive layouts. + +## 🛠 Prerequisites + +- **Node.js** (v14 or later) +- **Vue CLI** (v5 or later) +- A modern browser (Chrome, Firefox, Edge) +- A valid Syncfusion license for commercial use + +## 🚀 Getting Started + +1. **Clone the repository:** + ```bash + git clone https://github.com/SyncfusionExamples/vue3-pivottable-celltemplate + ``` +2. **Navigate to the project folder:** + ```bash + cd vue3-pivottable-getting-started + ``` +3. **Install dependencies:** + ```bash + npm install + ``` +4. **Run the application:** + ```bash + npm run serve + ``` +5. **Open the application:** + Open your browser and navigate to `http://localhost:8080` (or the port specified by Vue CLI). + +## 📂 Project Structure + +``` +vue3-pivottable-getting-started/ +├── public/ +│ ├── favicon.ico # Application favicon +│ └── index.html # Main HTML file +├── src/ +│ ├── assets/ +│ │ └── logo.png # Application logo +│ ├── App.vue # Main Vue component with Pivot Table +│ └── main.js # Application entry point +├── .git/ # Git metadata +├── README.md # Project documentation +├── package.json # Project dependencies and scripts +└── babel.config.js # Babel configuration for JavaScript compatibility +``` + +## 🖌️ Code Highlights + +- **Pivot Table Setup in `App.vue`:** + The Pivot Table is configured using the `ejs-pivotview` component with properties like `dataSourceSettings`, `height`, `width`, and `cellTemplate`. + ```vue + + ``` +- **Cell Template Logic:** + The `trend` method dynamically updates cell icons by comparing values between rows, applying classes like `sb-icon-profit` or `sb-icon-loss`. + +## 📚 Learn More + +- [Syncfusion Vue Pivot Table Documentation](https://ej2.syncfusion.com/vue/documentation/pivotview/getting-started) +- [Syncfusion Vue Pivot Table Demos](https://ej2.syncfusion.com/vue/demos/#/material3/pivot-table/overview.html) +- [Vue 3 Documentation](https://v3.vuejs.org/) +- [Vue CLI Guide](https://cli.vuejs.org/) + +## 💬 Support + +For questions or feedback, visit the [Syncfusion Support Portal](https://support.syncfusion.com) or [Community Forums](https://www.syncfusion.com/forums). + +## 📜 License + +This is a commercial product and requires a valid Syncfusion license. +[View License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf). \ No newline at end of file