Syncfusion JavaScript Pivot Table – Convert Number to Month Format

This sample demonstrates how to convert numeric month values into readable month names in the Syncfusion JavaScript Pivot Table (PivotView) component. It uses a client-side data source and updates the month values during the load event.

📖 Overview

The Pivot Table (PivotView) is a powerful tool for summarizing and analyzing data. In this example:

• We use a data source with fields like Month, Year, Country, Products, Sold, and Amount.
• The Month field initially contains numbers (1–12).
• During the load event, these numbers are converted into Date objects, and the Pivot Table displays them in short month format (e.g., Jan, Feb) using formatSettings.

🛠 Prerequisites

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

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/SyncfusionExamples/How-to-convert-number-into-month-format-in-PivotGrid

2. Install dependencies:

   npm install

3. Run the application:

   npm start

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

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

📂 Project Structure

• src/index.html – Main HTML page
• src/app/app.ts – PivotView configuration and month conversion logic
• src/styles/styles.css – Optional custom styles
• system.config.js – SystemJS configuration
• package.json – Scripts and dependencies

✅ Key Features in This Sample

• Custom Month Conversion:
  The Month field is converted from a number to a date object:

  load: function () {
      for (var i = 0; i < pivotGridObj.dataSource.data.length; i++) {
          var date = new Date();
          date.setMonth(pivotGridObj.dataSource.data[i]["Month"]);
          pivotGridObj.dataSource.data[i]["Month"] = date;
      }
  }

• Field Configuration:

  • Rows: Month
  • Columns: Year
  • Values: Sold (Units Sold), Amount (Sold Amount)
  • Formatting: Month displayed as short month (MMM), Amount in currency (C0)

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