📊 Getting Started — Angular Pivot Table Component (Syncfusion EJ2)

🚀 Angular quick-start template demonstrating Syncfusion EJ2 PivotView (Pivot Table) with Field List, Grouping Bar, Calculated Fields, Formatting, and Sorting — includes sample data, CLI scripts, and production-ready configuration.

📺 Official Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/default
📚 Official Documentation: https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started

🔍 Overview

This repository provides a production-ready starter template for integrating Syncfusion's powerful PivotView (Pivot Table) component into your Angular applications. It demonstrates essential features including:

✅ Interactive Pivot Table with drag-and-drop functionality
✅ Dynamic Field List for runtime field configuration
✅ Grouping Bar for intuitive data organization
✅ Calculated Fields for custom data computations
✅ Data Formatting (currency, percentages, etc.)
✅ Multi-level Sorting and Filtering
✅ Responsive Design with Tailwind CSS styling

✨ Key Features

Feature	Description	Benefit
🎯 Field List Interface	Dynamically add, remove, and rearrange data fields at runtime	Empowers end-users to customize reports without code
📊 Grouping Bar	Drag-and-drop fields between rows, columns, values, and filters	Intuitive data organization and real-time pivot manipulation
🧮 Calculated Fields	Create custom formulas combining multiple data fields	Advanced data analysis and custom metrics
💱 Data Formatting	Display values in currency, percentages, and custom formats	Professional presentation of numerical data
↕️ Multi-Level Sorting	Sort by multiple fields with ascending/descending control	Enhanced data exploration capabilities
🔗 Advanced Filtering	Filter by single or multiple criteria across all dimensions	Focused data analysis and drill-down exploration
📱 Responsive Design	Adapts seamlessly to desktop, tablet, and mobile screens	Universal accessibility across devices
🚀 Server-Side Rendering (SSR)	Full Angular SSR support out-of-the-box	SEO-friendly and faster initial page loads
⚡ Ivy Compilation	Modern Angular Ivy rendering engine	Smaller bundle sizes and improved performance
🎨 Theme Support	Multiple Tailwind and Bootstrap themes available	Consistent branding and visual customization

🚀 Quick Start

Prerequisites

Ensure you have the following installed on your system:

Node.js (LTS version or higher) — Download
npm (v10+) — Included with Node.js
Angular CLI — Install globally: npm install -g @angular/cli
Visual Studio Code — Optional but recommended — Download

Installation & Setup

# 1️⃣ Clone the repository
git clone https://github.com/SyncfusionExamples/angular-pivot-table-getting-started.git

# 2️⃣ Navigate to the project directory
cd angular-pivot-table-getting-started

# 3️⃣ Install dependencies
npm install

# 4️⃣ Start the development server
npm start

🎉 Success! Your application will open at http://localhost:4200/ in your default browser.

Additional Commands

# 🔨 Build for production
npm run build

# 👀 Build and watch for changes (development)
npm run watch

# 🧪 Run unit tests
npm test

# 🌐 Serve SSR version
npm run serve:ssr:my-app

🗂️ Project Structure

angular-pivot-table-getting-started/
├── 📄 angular.json
├── 📄 package.json
├── 📄 README.md
├── 📄 tsconfig.app.json
├── 📄 tsconfig.json
├── 📄 tsconfig.spec.json
├── 📁 public/
└── 📁 src/
  ├── 📄 index.html
  ├── 📄 main.ts
  ├── 📄 styles.css
  └── 📁 app/
    ├── 📄 app.config.ts
    ├── 📄 app.css
    ├── 📄 app.html
    ├── 📄 app.routes.ts
    ├── 📄 app.spec.ts
    └── 📄 app.ts

Key Files Explained

File	Purpose
`src/main.ts`	Angular application bootstrap entry point
`src/app/app.component.ts`	Root component containing PivotView logic
`src/styles.css`	Global styles and Syncfusion CSS imports
`package.json`	NPM dependencies (includes Syncfusion EJ2 packages)
`angular.json`	Angular CLI configuration for builds and dev server

🎨 Theming & Styling

Global CSS Imports (`src/styles.css`)

Add Syncfusion theme CSS to your global styles:

/* Tailwind3 Theme (Modern) */
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/tailwind3.css';

Available Themes

🎨 tailwind3 — Modern Tailwind CSS v3 design system
🏢 bootstrap5 — Bootstrap 5 professional styling
💎 fluent2 — Microsoft Fluent Design System
🌙 material3 — Google Material Design 3
🎭 fabric — Microsoft Fabric Design System

Swap themes by replacing the CSS import path:

/* Switch to Bootstrap5 theme */
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/bootstrap5.css';

🧩 Minimal Example

Component Implementation (`src/app/app.component.ts`)

import { Component, OnInit } from '@angular/core';
import { PivotViewModule, PivotFieldListModule } from '@syncfusion/ej2-angular-pivotview';
import { 
  IDataOptions, 
  IDataSet, 
  FieldListService, 
  CalculatedFieldService 
} from '@syncfusion/ej2-angular-pivotview';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PivotViewModule, PivotFieldListModule],
  providers: [FieldListService, CalculatedFieldService],
  template: `
    <div style="height: 480px;">
      <ejs-pivotview 
        #pivotview 
        id='PivotView' 
        height='350' 
        [dataSourceSettings]="dataSourceSettings"
        [width]="width"
        allowCalculatedField="true"
        showFieldList="true">
      </ejs-pivotview>
    </div>
  `
})
export class AppComponent implements OnInit {
  public pivotData!: IDataSet[];
  public dataSourceSettings!: IDataOptions;
  public width?: string;

  ngOnInit(): void {
    this.pivotData = [
      { 
        Amount: 2100, 
        Country: "Canada", 
        Date: "FY 2005", 
        Product: "Bike", 
        Quantity: 22, 
        State: "Alberta" 
      },
      { 
        Amount: 1100, 
        Country: "Canada", 
        Date: "FY 2006", 
        Product: "Van", 
        Quantity: 32, 
        State: "Quebec" 
      },
      // ... more data items
    ];

    this.dataSourceSettings = {
      dataSource: this.pivotData,
      columns: [
        { name: 'Date', caption: 'Date' }, 
        { name: 'Product' }
      ],
      rows: [
        { name: 'Country' }, 
        { name: 'State' }
      ],
      values: [
        { name: 'Amount', caption: 'Sold Amount' }, 
        { name: 'Quantity', caption: 'Quantity' }
      ],
      filters: [],
      expandAll: false,
      enableSorting: true,
      formatSettings: [{ name: 'Amount', format: 'C0' }],
      drilledMembers: [{ name: 'Country', items: ['France'] }],
      calculatedFieldSettings: [
        { name: 'Total', formula: '"Sum(Amount)"+"Sum(Quantity)"' }
      ]
    };

    this.width = "100%";
  }
}

Template Binding (`src/app/app.component.html`)

The component uses inline template binding. For external templates, create:

<!-- app.component.html -->
<div style="height: 480px;">
  <ejs-pivotview 
    #pivotview 
    id='PivotView' 
    height='350' 
    [dataSourceSettings]="dataSourceSettings"
    [width]="width"
    allowCalculatedField="true"
    showFieldList="true">
  </ejs-pivotview>
</div>

⚙️ Configuration & Customization

1️⃣ Configuring Pivot Table Axes

The dataSourceSettings object defines how data is organized:

dataSourceSettings: {
  // 📊 Data Source
  dataSource: this.pivotData,
  
  // 🎯 Row Fields (left vertical axis)
  rows: [
    { name: 'Country', caption: 'Country' },
    { name: 'State', caption: 'State' }
  ],
  
  // 📈 Column Fields (top horizontal axis)
  columns: [
    { name: 'Date', caption: 'Fiscal Year' },
    { name: 'Product', caption: 'Product Category' }
  ],
  
  // 💰 Value Fields (numeric aggregations)
  values: [
    { name: 'Amount', caption: 'Sales Amount', type: 'Sum' },
    { name: 'Quantity', caption: 'Units Sold', type: 'Sum' }
  ],
  
  // 🔗 Filter Fields (master filters)
  filters: [
    { name: 'Region', caption: 'Region' }
  ]
}

2️⃣ Enabling Interactive Features

// Component properties for interactive features
showFieldList: true,              // ✅ Enable Field List UI
showGroupingBar: true,            // ✅ Enable Grouping Bar
allowCalculatedField: true,       // ✅ Allow user-defined calculated fields
enableSorting: true,              // ✅ Enable multi-level sorting
enableFiltering: true,            // ✅ Enable advanced filtering
allowDrillThrough: true,          // ✅ Enable drill-through to detail data

3️⃣ Module Injection for Advanced Features

import { 
  PivotViewModule, 
  PivotFieldListModule,
  GroupingBarService,
  FieldListService,
  CalculatedFieldService 
} from '@syncfusion/ej2-angular-pivotview';

@Component({
  providers: [
    GroupingBarService,        // For drag-drop grouping bar
    FieldListService,          // For field list interface
    CalculatedFieldService     // For calculated field support
  ]
})
export class AppComponent { }

4️⃣ Applying Data Formatting

Format numeric values for better presentation:

formatSettings: [
  { name: 'Amount', format: 'C0' },           // Currency: $1,234
  { name: 'Quantity', format: 'N2' },         // Number: 1,234.56
  { name: 'Percentage', format: 'P2' },       // Percentage: 12.34%
  { name: 'Date', format: 'yyyy-MM-dd' }      // Date: 2025-02-03
]

5️⃣ Calculated Fields Example

Create custom fields combining multiple data sources:

calculatedFieldSettings: [
  {
    name: 'GrossSales',
    formula: '"Sum(Amount)"+"Sum(Tax)"'
  },
  {
    name: 'NetSales',
    formula: '"Sum(GrossSales)"-"Sum(Discount)"'
  }
]

🤝 Contributing

We welcome contributions! Please follow these guidelines:

1. Fork & Clone

git clone https://github.com/YOUR-USERNAME/angular-pivot-table-getting-started.git
cd angular-pivot-table-getting-started

2. Create Feature Branch

git checkout -b feature/your-feature-name

3. Make Changes & Commit

# Follow conventional commits
git commit -m "feat: add pivot table export to Excel functionality"

4. Push & Create Pull Request

git push origin feature/your-feature-name

Code Style Guidelines

✅ Follow Angular style guide: https://angular.io/guide/styleguide
✅ Use TypeScript strict mode
✅ Include meaningful variable names
✅ Add JSDoc comments for complex functions
✅ Write unit tests for new features

Commit Message Format

<type>(<scope>): <subject>

<body>

<footer>

Examples:

feat(pivot-table): add calculated field validation
fix(field-list): resolve drag-drop positioning issue
docs(getting-started): update installation steps
test(pivot-view): add unit tests for sorting

📜 License & Support

License

This project is licensed under the Syncfusion Essential Studio Community License or Commercial License. Ensure you have appropriate licensing for your use case.

Commercial License: Contact sales@syncfusion.com

📄 Full License Agreement: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

Support & Resources

Resource	Link
📚 Documentation	https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started
🎥 Video Tutorials	https://www.youtube.com/watch?v=HXTnI9XhVSw
💬 Community Forum	https://www.syncfusion.com/forums/angular
🐛 Report Issues	GitHub Issues
📧 Commercial Support	sales@syncfusion.com

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

📊 Getting Started — Angular Pivot Table Component (Syncfusion EJ2)

📑 Table of Contents

🔍 Overview

✨ Key Features

🚀 Quick Start

Prerequisites

Installation & Setup

Additional Commands

🗂️ Project Structure

Key Files Explained

🎨 Theming & Styling

Global CSS Imports (`src/styles.css`)

Available Themes

🧩 Minimal Example

Component Implementation (`src/app/app.component.ts`)

Template Binding (`src/app/app.component.html`)

⚙️ Configuration & Customization

1️⃣ Configuring Pivot Table Axes

2️⃣ Enabling Interactive Features

3️⃣ Module Injection for Advanced Features

4️⃣ Applying Data Formatting

5️⃣ Calculated Fields Example

🤝 Contributing

1. Fork & Clone

2. Create Feature Branch

3. Make Changes & Commit

4. Push & Create Pull Request

Code Style Guidelines

Commit Message Format

📜 License & Support

License

Support & Resources

Getting Help

🌟 Related Resources

📚 Syncfusion Angular Components

🔗 Complementary Examples

📚 Learning Resources

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

📊 Getting Started — Angular Pivot Table Component (Syncfusion EJ2)

📑 Table of Contents

🔍 Overview

✨ Key Features

🚀 Quick Start

Prerequisites

Installation & Setup

Additional Commands

🗂️ Project Structure

Key Files Explained

🎨 Theming & Styling

Global CSS Imports (src/styles.css)

Available Themes

🧩 Minimal Example

Component Implementation (src/app/app.component.ts)

Template Binding (src/app/app.component.html)

⚙️ Configuration & Customization

1️⃣ Configuring Pivot Table Axes

2️⃣ Enabling Interactive Features

3️⃣ Module Injection for Advanced Features

4️⃣ Applying Data Formatting

5️⃣ Calculated Fields Example

🤝 Contributing

1. Fork & Clone

2. Create Feature Branch

3. Make Changes & Commit

4. Push & Create Pull Request

Code Style Guidelines

Commit Message Format

📜 License & Support

License

Support & Resources

Getting Help

🌟 Related Resources

📚 Syncfusion Angular Components

🔗 Complementary Examples

📚 Learning Resources

Global CSS Imports (`src/styles.css`)

Component Implementation (`src/app/app.component.ts`)

Template Binding (`src/app/app.component.html`)