Getting Started — Angular Pivot Table Component (Syncfusion EJ2)

Updated on Feb 06, 2026

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 [email protected]

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	[email protected]

Getting Help

Check the official documentation
Ask in Syncfusion community forums
Contact Syncfusion support for enterprise assistance

Syncfusion Angular Components

Angular Data Grid — Enterprise-grade data table
Angular Charts — 50+ chart types
Angular Scheduler — Event scheduling
Angular Reports — Business intelligence reporting

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

Syncfusion Angular Components

Complementary Examples

Learning Resources

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`)