987889: Updating the Readme file content

README.md

@@ -1,32 +1,83 @@
-# Essential JS 2 QuickStart
+# Syncfusion JavaScript Pivot Table – Custom Data Example
 
-## Installing
+This sample demonstrates how to **customize and display data in the Syncfusion JavaScript Pivot Table (PivotView)** component. It uses a client-side data source and shows how to modify fields dynamically before rendering.
 
-We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+## 📖 Overview
 
-We already configure the required packages in the `package.json` file.
+The Pivot Table (PivotView) is a powerful component for summarizing and analyzing large datasets. In this example:
 
-You can run the below command to install all dependent packages related to this seed project.
+- We define a **data source** with fields like `Country`, `Products`, `Year`, `Quarter`, `Sold`, and `Amount`.
+- We configure **rows**, **columns**, **values**, and **filters** for the Pivot Table.
+- We demonstrate **customization** by modifying the `Year` field during the `load` event.
 
-```
-npm install
-```
+## 🛠 Prerequisites
 
-## Running
+- [Node.js](https://nodejs.org/) (optional, for running a local server)
+- A modern browser (Chrome, Firefox, Edge)
 
-The application is configured with `browser-sync`, so it will serve the web application in your default browser.
+## 🚀 Getting Started
 
-We used `SystemJS` for module loading.
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/SyncfusionExamples/How-to-customize-the-data-in-PivotGrid
+   ```
 
-You can use the below npm script to run the web application.
+2. **Install dependencies:**
+   ```bash
+   npm install
+   ```
 
-```
-npm start
-```
+3. **Run the application:**
+   ```bash
+   npm start
+   ```
+   This will launch the app in your default browser using **browser-sync**.
 
-## Resources
+4. Alternatively, open `index.html` directly in your browser.
 
-You can also refer the below resources to know more details about Essential JS 2 components.
+## 📂 Project Structure
 
-* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
-* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
+- src/index.html – App host page and styles
+- src/app/app.ts – PivotView configuration and data customization logic
+- src/styles/styles.css – Optional custom styles
+- system.config.js – SystemJS configuration
+- package.json – Scripts and dependencies
+
+## ✅ Key Features in This Sample
+
+- **Custom Data Source:**  
+  The data includes sales information for different countries, products, and fiscal years.
+
+- **Dynamic Field Customization:**  
+  In the `load` event, the `Year` field is modified to remove the `FY` prefix:
+  ```javascript
+  load: function () {
+      for (var i = 0; i < pivotGridObj.dataSource.data.length; i++) {
+          pivotGridObj.dataSource.data[i]["Year"] =
+              pivotGridObj.dataSource.data[i]["Year"].slice(3);
+      }
+  }
+  ```
+
+- **Field Configuration:**  
+  - **Rows:** `Country`, `Products`
+  - **Columns:** `Year`, `Quarter`
+  - **Values:** `Sold` (Units Sold), `Amount` (Sold Amount)
+  - **Formatting:** `Amount` displayed in currency format (`C0`)
+
+- **Interactive Field List:**  
+  Users can drag and drop fields to customize the Pivot Table layout.
+
+## 📚 Learn More
+
+- [Pivot Table Documentation](https://ej2.syncfusion.com/documentation/pivotview/getting-started)
+- [Pivot Table Demos](https://ej2.syncfusion.com/demos/#/tailwind3/pivot-table/overview)
+
+## 💬 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).