📊 Save & Load Reports in JavaScript PivotView Component

Production-ready example demonstrating toolbar-based report persistence in Syncfusion Essential JS 2 PivotView — save and restore pivot table configurations with seamless localStorage integration and web-standards compliance.

🎯 Overview

This repository provides a complete, production-ready implementation for saving and loading pivot table reports using Syncfusion's Essential JS 2 PivotView component. Whether building business intelligence dashboards, financial reporting tools, or analytics applications, this example demonstrates modern patterns for persistent pivot table configuration management.

✨ Key Features

• ✅ Save Reports: Persist pivot table configurations through intuitive toolbar buttons
• ✅ Load Reports: Restore saved configurations with single-click operation
• ✅ Toolbar Integration: Seamless report management UI within EJ2 toolbar
• ✅ Syncfusion EJ2: Leverages robust, feature-rich PivotView component
• ✅ Web Standards: Pure HTML, CSS, and JavaScript—zero framework dependencies
• ✅ Browser Compatible: Works across Chrome, Firefox, Safari, and Edge
• ✅ Quick Start: Minimal setup with working example included

🛠 Prerequisites & Requirements

• Web Browser: Chrome, Firefox, Safari, or Edge (latest versions)
• Text Editor: Visual Studio Code or similar
• Live Server: Optional—enables quick development preview
• JavaScript Knowledge: Familiarity with ES5 and DOM manipulation
• Syncfusion License: Community or commercial license for production use

📦 Installation & Setup

1. Clone Repository

   git clone https://github.com/SyncfusionExamples/save-and-load-report-through-the-toolbar-in-javascript-pivotview-component
   cd save-and-load-report-through-the-toolbar-in-javascript-pivotview-component

2. Verify Project Files: Ensure presence of:

   • index.html — Main application template
   • index.js — PivotView configuration and report logic
   • index.css — Component styling
   • es5-datasource.js — Sample data source

3. Launch Application

   • Right-click index.html → "Open with Live Server"
   • Or open directly in browser: file:///path/to/index.html

🚀 Quick Start

Once loaded:

• View Data: Pivot table displays configured datasource
• Save Report: Click toolbar "Save" button to persist current layout
• Load Report: Select previously saved report from dropdown to restore
• Modify & Re-save: Adjust pivot configuration and save as new report

🗂 Project Structure

├── index.html          # Application template & PivotView markup
├── index.js            # PivotView initialization & report management
├── index.css           # Component styling & layout
├── es5-datasource.js   # Sample JSON datasource
└── README.md           # This file

🔧 Configuration & Customization

Save Report Button: Captures current pivot configuration to local storage Load Report Button: Retrieves and applies saved configurations Data Binding: Modify es5-datasource.js to bind custom data sources Styling: Update index.css for branding and layout customization

📚 Resources

• Syncfusion EJ2 PivotView Documentation
• JavaScript MDN Documentation
• localStorage API Guide

📄 License

This project is licensed under the Syncfusion Community License. See Syncfusion License for details.

🆘 Support

For issues or questions:

• 📧 Open an issue on GitHub
• 💬 Visit Syncfusion support forums
• 🌐 Check Syncfusion documentation