Skip to content

README.md

Latest commit

 

History

History
87 lines (63 loc) · 4.25 KB

README.md

File metadata and controls

87 lines (63 loc) · 4.25 KB

📊 Save & Load Reports in JavaScript PivotView Component

License JavaScript Syncfusion EJ2

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

📄 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