Syncfusion JavaScript Pivot Table – Custom Data Example

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.

📖 Overview

The Pivot Table (PivotView) is a powerful component for summarizing and analyzing large datasets. In this example:

• 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.

🛠 Prerequisites

• Node.js (optional, for running a local server)
• A modern browser (Chrome, Firefox, Edge)

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/SyncfusionExamples/How-to-customize-the-data-in-PivotGrid

2. Install dependencies:

   npm install

3. Run the application:

   npm start

   This will launch the app in your default browser using browser-sync.

4. Alternatively, open index.html directly in your browser.

📂 Project Structure

• 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:

  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
• Pivot Table Demos

💬 Support

For questions or feedback, visit the Syncfusion Support Portal or Community Forums.

📜 License

This is a commercial product and requires a valid Syncfusion license.
View License Terms.