987889: Updating the README file content

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: `<span class="template-wrap"><span class="tempwrap sb-icon-neutral pv-icons"></span></span>`
+  ```
+- **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
+  <ejs-pivotview
+    id="pivotview"
+    ref="pivotview"
+    :dataSourceSettings="dataSourceSettings"
+    :height="height"
+    :width="width"
+    :dataBound="trend"
+    :cellTemplate="cellTemplate"
+  ></ejs-pivotview>
+  ```
+- **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).