Implementing Angular Pivot Grid

The Syncfusion Angular Pivot Grid is a powerful data visualization and analysis component for creating interactive pivot tables, aggregating multidimensional data, and performing advanced analytics operations.

Important: Always verify API class names, properties, and method signatures by consulting the reference files in this skill (

references/*.md

). These are maintained with verified, working examples. Do not assume API details from other sources.

When to Use This Skill

Use this skill when users need to:

Create and configure pivot tables from multidimensional data
Bind data from OLAP or relational data sources
Aggregate data with multiple aggregation functions (Sum, Avg, Count, etc.)
Group data by number ranges, dates, or custom categories
Create and manage calculated fields with formulas
Enable drill-down and drill-through operations
Visualize data with integrated pivot charts
Apply custom formatting and conditional styling
Optimize large dataset performance
Export pivot grid data to Excel or PDF
Persist and restore pivot grid state
Customize UI with field lists, grouping bars, and toolbars

Documentation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package setup
Basic Angular Pivot Grid implementation
CSS imports and theme configuration
RTL (Right-to-Left) support
Component initialization

Aggregation

📄 Read: references/aggregation.md

Aggregation functions: Sum, Avg, Count, Min, Max, Product, Median, DistinctCount
Advanced aggregations: DifferenceFrom, PercentageOfDifferenceFrom, PercentageOfParentTotal
Base field configuration with baseField and baseItem properties
Multiple aggregations on same field
Customizing aggregation dropdown and UI
Runtime aggregation type changes
Events: aggregateCellInfo, actionBegin, actionComplete

Grouping

📄 Read: references/grouping.md

Enable grouping with
```
allowGrouping: true
```
and inject
```
GroupingService
```
Number grouping: Configure ranges with rangeInterval, startingAt, endingAt
Date grouping: Organize by Years, Quarters, Months, Days, Hours, Minutes, Seconds
Custom grouping: Group data by business-defined categories
UI-based grouping through context menu
Ungrouping and programmatic ungrouping
Common grouping patterns and troubleshooting

Calculated Fields

📄 Read: references/calculated-field.md

Creating calculated fields interactively and programmatically

Enabling with

allowCalculatedField: true

, injecting

CalculatedFieldService

Defining with
```
calculatedFieldSettings
```
(name, formula)
Adding to values array with
```
type: 'CalculatedField'
```
Editing/renaming fields through UI (Field List, Grouping Bar)
Formula syntax: Operators (+, -, , /, ^, <, >, ==, !=, &, |, ?), Functions (abs, min, max, isNaN, Math.)
Aggregation functions in formulas: Sum, Count, Avg, Min, Max
Formatting with separate
```
formatSettings
```
array: Currency (C), Number (N), Percentage (P)
Events: calculatedFieldCreate (validation), actionBegin/actionComplete (control operations)

Pivot Chart Integration

📄 Read: references/pivot-chart-integration.md

Chart types: 21+ types including Line, Column, Area, Bar, Pie, Doughnut, Funnel, Pyramid
Display options: Configure with
```
displayOption
```
to show Grid, Chart, or Both
Series customization: Customize charts via
```
chartSeries
```
with marker, dataLabel, etc.
Drill operations: Enable drill-down/drill-up on accumulation charts
Multiple axes: Configure
```
enableMultipleAxis
```
for multi-value visualization
Chart events: Series creation, axis customization, legend customization

Filtering & Sorting

📄 Read: references/filtering-and-sorting.md

Label filtering: Filter by field names and member values
Value filtering: Filter rows/columns by aggregated values
Member filtering: UI-based filtering through Field List
Member search: Quick search in filter dialogs
Sort settings: Configure ascending/descending sort by field
Advanced sorting: Sort by aggregated values or custom order

Data Formatting & Conditional Formatting

📄 Read: references/data-formatting.md

Number formats: Currency (C), Percentage (P), Number (N), Scientific (E)
Custom formats: Define format strings with placeholders
Conditional formatting: Apply colors/styles based on cell values
Icon sets: Display icons based on thresholds
Data bars: Show bar visualization within cells
Format settings configuration

Export & Printing

📄 Read: references/export-and-print.md

Excel export:
```
excelExport()
```
with custom properties, themes
PDF export:
```
pdfExport()
```
with headers, footers, page orientation
CSV export:
```
csvExport()
```
for large datasets (1M+ rows)
Print functionality:
```
print()
```
method for table and chart
Multi-table export: Combine multiple pivot tables in single file
Export customization: Cell styling, color themes, branding

UI Customization

📄 Read: references/ui-customization.md

Toolbar configuration: Show/hide built-in toolbar items
Report management: New, Save, Load, Delete reports
View switching: Toggle between Grid and Chart modes
Export options: Quick export buttons
Grand totals/Subtotals: Show/hide and customize positioning
Custom templates: Build custom toolbar or field list

Grouping Bar UI Operations

📄 Read: references/grouping-bar-ui-operations.md

Grouping bar setup and configuration
Drag-and-drop field reorganization between axes
Filter, sort, and remove operations
Fields panel management and visibility control
Icon controls: filter, sort, remove buttons
Field-specific vs global icon configuration
Responsive grouping bar for different screen sizes

Tooltips Customization

📄 Read: references/tooltips-customization.md

Enable/disable tooltips with
```
showTooltip
```
property
Custom tooltip templates with dynamic placeholders
Available placeholders:
```
${rowHeaders}
```
,
```
${columnHeaders}
```
,
```
${value}
```
, etc.
Pivot chart tooltip customization
CSS styling for tooltip appearance
Dynamic tooltip content based on cell values
Troubleshooting tooltip rendering issues

Editing & Drill Operations

📄 Read: references/editing-drill-operations.md

Enable cell editing with
```
allowEditing: true
```
(relational data only)

Edit settings:

allowAdding

allowDeleting

allowCommandColumns

Four editing modes: Normal, Dialog, Batch, Command Column
Inline editing for quick updates

Edit events:

editCompleted

actionBegin

actionComplete

actionFailure

Custom validation and confirmation dialogs
Editing via pivot chart data points
CRUD operations and data persistence
Drill through and drill down operations
Cell drill-down events and customization

OLAP Data Sources

📄 Read: references/olap-data-sources.md

OLAP vs relational data source differences
Connection configuration:
```
url
```
,
```
catalog
```
,
```
cube
```
,
```
providerType
```
OLAP cube elements: Measures, Dimensions, Hierarchies, Named Sets
Authentication and role-based access control
Working with hierarchies and attribute hierarchies
Calculated fields (Calculated Measures and Dimensions) for OLAP
Advanced features: Virtual scrolling, drill-down, filter axis
MDX formula support and expression syntax

Paging Configuration

📄 Read: references/paging-configuration.md

Enable paging with
```
enablePaging: true
```
and inject
```
PagerService
```

Page settings:

rowPageSize

columnPageSize

currentRowPage

currentColumnPage

Pager UI configuration and positioning (Top/Bottom)
Row vs column paging
Compact view and inverse pager layout
Custom page size options in dropdown
Paging with virtual scrolling for optimization
Server-side paging for huge datasets
Mobile-optimized paging

Virtual Scrolling

📄 Read: references/virtual-scrolling.md

Enable virtual scrolling with
```
enableVirtualization: true
```
for large datasets
Single page mode: Use
```
allowSinglePage: true
```
to render only current view page
Limitations: pixel-based columnWidth, avoid runtime sizing changes
Static FieldList synchronization using
```
enginePopulated
```
events and
```
update
```
/
```
updateView
```
methods
Performance optimization for 100K+ rows on client-side

Drill-Down & Drill-Through Operations

📄 Read: references/drill-down.md

Drill-down: Navigate hierarchical data by clicking cells
Drill-up: Navigate back to higher levels
Drill-through: View raw underlying data for aggregated values
Events:
```
cellClick
```
,
```
fieldDrop
```
,
```
fieldsUpdated
```
for drill interactions
Context menu: Built-in drill operations

Database Connections

📄 Read: references/database-connections.md

Relational databases: SQL Server, MySQL, PostgreSQL, Oracle
NoSQL databases: MongoDB support
Big data: Elasticsearch integration
Connection strings: Configure data source connections
Query optimization: Pre-aggregation and filtering

Server-Side Pivot Engine

📄 Read: references/server-side-pivot-engine.md

Server-side processing: Delegate aggregation to backend server
ASP.NET Core setup: Download and configure PivotController application
Angular client configuration: Set mode: 'Server' with server endpoint URL
Data sources: Collection, JSON, CSV, DataTable, Dynamic objects
Virtual scrolling: Handle 100K+ rows efficiently
Excel/CSV export: Export processed data to files
Security: Add authentication headers with beforeServiceInvoke event

Performance Optimization

📄 Read: references/performance-optimization.md

Virtual scrolling: Enable with
```
enableVirtualization: true
```
for 100K+ rows
Single page mode: Use
```
allowSinglePage: true
```
for better performance
Paging: Configure with
```
pageSettings
```
for row/column pagination
Data compression: Enable
```
allowDataCompression: true
```
for duplicate record summarization
Deferred updates: Use
```
allowDeferLayoutUpdate: true
```
to batch field operations
Large dataset handling: Server-side processing with
```
mode: 'Server'
```
Best practices: Pre-filtering, optimized sorting, member filtering limits, avoiding built-in grouping

State Persistence & Hyperlinks

📄 Read: references/state-persistence-hyperlinks.md

State persistence: Save and restore pivot configuration
Local storage: Store report state in browser
Report export/import: JSON format serialization
Hyperlinks: Enable clickable hyperlinks in cells
Hyperlink events: Respond to hyperlink clicks
Hyperlink customization: Set targets and formatting

Quick Start Example

typescript

import { PivotViewAllModule, PivotChartService } from '@syncfusion/ej2-angular-pivotview';
import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotViewComponent, IDataSet } from '@syncfusion/ej2-angular-pivotview';

@Component({
  imports: [PivotViewAllModule],
  providers: [PivotChartService],
  standalone: true,
  selector: 'app-pivot-grid',
  template: `
    <ejs-pivotview #pivotview id='PivotView' 
      [dataSourceSettings]=dataSourceSettings
      [height]="'500px'"
      [width]="'100%'"
      [allowCalculatedField]="true" 
      [allowGrouping]="true"
      [allowConditionalFormatting]="true"
      [displayOption]="displayOption"
      [toolbar]="toolbarItems">
    </ejs-pivotview>
  `
})
export class AppComponent implements OnInit {
    @ViewChild('pivotview') pivotViewComponent!: PivotViewComponent;
    
    public pivotData!: IDataSet[];
    public dataSourceSettings: any;
    public displayOption: any;
    public toolbarItems: string[] = ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load',
                                      'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal'];

    ngOnInit(): void {
        this.pivotData = [
            { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
            { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
            { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
            { 'Sold': 25, 'Amount': 42500, 'Country': 'France', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
            { 'Sold': 40, 'Amount': 68000, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' }
        ];

        // Display both grid and chart with grid as primary view
        this.displayOption = { view: 'Both', primary: 'Table' };

        this.dataSourceSettings = {
            dataSource: this.pivotData,
            expandAll: false,
            rows: [{ name: 'Country' }, { name: 'Products' }],
            columns: [{ name: 'Year' }, { name: 'Quarter' }],
            values: [
                { name: 'AvgAmount', type: 'CalculatedField' },
                { name: 'Sold', type: 'Count' }
            ],
            calculatedFieldSettings: [
                {
                    name: 'AvgAmount',
                    formula: '"Sum(Amount)"/"Count(Sold)"'  // Calculated field: Average
                }
            ],
            formatSettings: [
                { name: 'Amount', format: 'C2' },             // Currency format
                { name: 'AvgAmount', format: 'C2' }           // Format calculated field
            ],
            conditionalFormatSettings: [
                {
                    measure: 'Amount',
                    value1: 50000,
                    value2: 100000,
                    condition: 'Between',
                    style: { backgroundColor: '#FFE5CC', color: 'black' }
                }
            ]
        };
    }
}

Common Patterns

Pattern 1: Multiple Fields with Different Aggregation Types

Each field supports only ONE aggregation type. To analyze different aspects, use different fields with their respective aggregation functions:

typescript

values: [
    { name: 'Amount', type: 'Sum' },      // Total sales amount
    { name: 'Quantity', type: 'Avg' },    // Average quantity sold
    { name: 'Sold', type: 'Count' },      // Number of transactions
    { name: 'Price', type: 'Min' },       // Minimum price
]

Note: Each field in the values array can only have ONE type. To get multiple aggregation types for analysis, use different fields or create calculated fields combining aggregations.

Pattern 2: Hierarchical Grouping

Organize data with multi-level grouping:

typescript

rows: [
    { name: 'Country' },    // Primary level
    { name: 'Region' },     // Secondary level
    { name: 'City' }        // Tertiary level
],
columns: [
    { name: 'Year' },       // Year level
    { name: 'Quarter' }     // Quarter level
]

Pattern 4: Number Range Grouping

Group numeric fields into ranges:

typescript

groupSettings: [
    {
        name: 'ProductID',
        type: 'Number',
        rangeInterval: 5,
        startingAt: 1000,
        endingAt: 1010
    }
]

Pattern 5: Date Hierarchy Grouping

Organize dates with time-based hierarchies:

typescript

groupSettings: [
    {
        name: 'OrderDate',
        type: 'Date',
        groupInterval: ['Years', 'Months'],  // Year then month hierarchy
        startingAt: new Date(2020, 0, 1),
        endingAt: new Date(2023, 11, 31)
    }
]

Key Configuration Properties

Property	Type	Purpose
`values`	Array	Fields to aggregate with type (Sum, Avg, Count, CalculatedField, etc.)
`type`	String	Aggregation type for value field (Sum, Avg, Count, Min, Max, etc.) or 'CalculatedField' for calculated fields
`baseField`	String	Field reference for DifferenceFrom/Percentage comparisons
`baseItem`	String	Specific member for base field comparisons
`allowCalculatedField`	Boolean	Enable calculated field feature
`calculatedFieldSettings`	Array	Define calculated field name and formula
`formula`	String	Mathematical expression for calculated field using aggregation functions
`formatSettings`	Array	SEPARATE array for number formatting (N, C, P) of values and calculated fields
`allowGrouping`	Boolean	Enable grouping feature
`groupSettings`	Array	Configure number, date, or custom grouping
`groupInterval`	Array	Grouping hierarchy (Years, Months, Days, etc.)
`aggregateTypes`	Array	Show specific aggregation types in UI dropdown
`showAggregationOnValueField`	Boolean	Display aggregation type in button text

Important: When adding calculated fields to values, use

type: 'CalculatedField'

to distinguish them from regular aggregations.

Next Steps

Foundation (Start here):

Read Getting Started for setup and initialization
Read Aggregation to implement aggregation functions and base field aggregations
Read Grouping to configure number, date, and custom grouping

Data Manipulation: 4. Read Calculated Fields for complex calculations and custom field formulas 5. Read Filtering & Sorting for label/value filtering and custom sorting 6. Read Data Formatting for number formats and conditional formatting

Visualization & Interaction: 7. Read Pivot Chart Integration for charting and drill operations 8. Read UI Customization for toolbars and custom interfaces 9. Read Drill-Down & Drill-Through for hierarchical data exploration

Advanced Features: 10. Read Export & Printing for multi-format export (Excel, PDF, CSV) 11. Read State Persistence for saving and restoring configurations 12. Read Database Connections for SQL/NoSQL/big data integration 13. Read Server-Side Pivot Engine for processing 100K+ rows on backend 14. Read Performance Optimization for large datasets, deferred updates, and virtual scrolling

Foundational References

These files provide foundational knowledge and may be referenced by feature guides:

📄 references/core-concepts.md - Data binding types (JSON, CSV, OLAP), client-side vs server-side comparison, choosing appropriate data sources

📄 references/layout-and-columns.md - Classic layout, row/column sizing, column features, cell selection and customization

📄 references/field-list.md - Field list UI (popup/fixed modes), field organization, deferred updates patterns

syncfusion-angular-pivot-table

NPX Install

Tags

SKILL.md Content

Implementing Angular Pivot Grid

When to Use This Skill

Documentation Guide

Getting Started

Aggregation

Grouping

Calculated Fields

Pivot Chart Integration

Filtering & Sorting

Data Formatting & Conditional Formatting

Export & Printing

UI Customization

Grouping Bar UI Operations

Tooltips Customization

Editing & Drill Operations

OLAP Data Sources

Paging Configuration

Virtual Scrolling

Drill-Down & Drill-Through Operations

Database Connections

Server-Side Pivot Engine

Performance Optimization

State Persistence & Hyperlinks

Quick Start Example

Common Patterns

Pattern 1: Multiple Fields with Different Aggregation Types

Pattern 2: Hierarchical Grouping

Pattern 4: Number Range Grouping

Pattern 5: Date Hierarchy Grouping

Key Configuration Properties

Next Steps

Foundational References