Claude
Skills
Sign in
Back

syncfusion-angular-pivot-table

Included with Lifetime
$97 forever

Use this skill when users ask how to build or customize Syncfusion PivotView pivot tables in Angular. Trigger for Angular pivot grid/OLAP, aggregation, data binding (JSON/remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Angular-only, not React/Vue/Blazor.

Web Dev

What this skill does


# 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.

## ⚠️ Security Warning: Data Source Validation

**CRITICAL SECURITY NOTICE:** When implementing pivot tables, always use trusted data sources. **Never** fetch or bind data from untrusted or user-provided URLs without proper validation and sanitization.

### Security Best Practices:

1. **Use Local Data**: Prefer local, in-memory data sources for maximum security
2. **Validate Remote Sources**: Only connect to authenticated and authorized API endpoints under your control
3. **Sanitize User Input**: Never allow users to specify arbitrary URLs or data sources
4. **Implement Authentication**: Always use authentication headers and secure API endpoints
5. **Content Validation**: Validate and sanitize all data received from external sources before binding
6. **Use HTTPS**: Always use HTTPS for remote data connections
7. **Rate Limiting**: Implement rate limiting on API endpoints to prevent abuse

### Security Risks:

- **Indirect Prompt Injection**: Untrusted third-party data can contain malicious content that manipulates AI agent behavior
- **Data Exfiltration**: Malicious data sources could attempt to extract sensitive information
- **Code Injection**: Untrusted data may contain scripts or harmful content

### Recommended Approach:

✅ **DO**: Use controlled, authenticated backend APIs
✅ **DO**: Implement server-side data validation
✅ **DO**: Use environment variables for API endpoints
✅ **DO**: Whitelist allowed data sources

❌ **DON'T**: Accept user-provided URLs
❌ **DON'T**: Bind to public, untrusted endpoints
❌ **DON'T**: Skip data validation and sanitization
❌ **DON'T**: Use HTTP for sensitive data

## 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](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](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](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](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](references/pivot-chart-integration.md)
- Inject `PivotChartService` provider to enable chart functionality
- Chart types: 21+ types including Line, Column, Area, Bar, StepArea, Pie, Doughnut, Funnel, Pyramid, Radar, Polar, Pareto, Bubble, Scatter, Spline
- Display options: Configure with `displayOption` property to show Table, Chart, or Both with `view` and `primary` settings
- Series customization: Customize charts via `chartSeries` in `chartSettings` (type, marker, dataLabel)
- Field list integration: Enable with `showFieldList: true` for dynamic field manipulation
- Grouping bar support: Enable with `showGroupingBar: true` for axis field switching
- Axis configuration: Customize X/Y axes via `primaryXAxis` and `primaryYAxis` in `chartSettings`
- Multiple axes: Configure `enableMultipleAxis` for multi-value visualization with `multipleAxisMode`
- Accumulation chart drill: Support drill-down/up on Pie, Doughnut, Funnel, Pyramid via context menu

### Filtering & Sorting
📄 **Read:** [references/filtering-and-sorting.md](references/filtering-and-sorting.md)
- Member filtering: Include or exclude specific field members
- Label filtering: Filter based on header text or member names
- Value filtering: Filter based on aggregated values meeting conditions
- Member sorting: Arrange field members in ascending/descending order
- Custom member sorting: Sort field members in user-defined order using `membersOrder`
- Value sorting: Sort pivot table values and aggregated data with `enableValueSorting`
- Programmatic value sorting: Configure with `valueSortSettings`

### Data Formatting & Conditional Formatting
📄 **Read:** [references/data-formatting.md](references/data-formatting.md)
- Number formatting: Apply Currency (C), Percentage (P), Number (N), Scientific (E) formats
- Custom format strings: Define format strings with placeholders for calculated fields
- Conditional formatting: Apply colors/styles based on cell values using `conditionalFormatSettings`
- Format settings configuration: Configure in separate `formatSettings` array in `dataSourceSettings`

### Export & Printing
📄 **Read:** [references/export-and-print.md](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](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:** [refer

Related in Web Dev