diff --git a/README.md b/README.md index cf0565f..73914fa 100644 --- a/README.md +++ b/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).