Implementing PivotView in React

The Syncfusion React PivotView component enables powerful data analysis and reporting capabilities. It allows users to organize, analyze, and summarize multidimensional data through interactive pivot tables with features like grouping, filtering, aggregation, drill-down analysis, and export functionality.

⚠️ 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 you need to:

• Create interactive pivot tables for data analysis
• Set up data aggregation and summarization
• Build dynamic reporting dashboards
• Configure row/column grouping with hierarchies
• Implement data filtering and sorting
• Add drill-down/drill-through capabilities
• Export reports to Excel or PDF
• Optimize performance for large datasets
• Style and format pivot table display
• Persist pivot table state across sessions

Navigation Guide

Setup

📄 Read: references/getting-started.md

• Installation, package setup, basic component creation, CSS imports, NextJS integration

📄 Read (optional): references/nextjs-integration.md

• Next.js App Router and Pages Router setup, dynamic imports, SSR considerations, API routes, deployment

Data Management

📄 Read: references/data-binding.md

• JSON data binding, CSV data binding, remote data binding, field mapping, DataManager setup

📄 Read: references/connecting-to-databases.md

• Database connections, Web API setup, SQL Server, MySQL, PostgreSQL, MongoDB, Oracle, Elasticsearch, Snowflake

📄 Read: references/connecting-to-data-source.md

• OLAP connections, server-side engine configuration, real-time data updates

Visualization & Interaction

📄 Read: references/pivot-chart.md

• Integrating pivot charts, chart types, visualization options, chart customization

📄 Read: references/classic-layout.md

• Classic layout configuration, layout switching, UI control options

📄 Read: references/drill.md

• Drill-down and drill-through functionality, editing, navigation controls, event handling

Data Organization & Display

📄 Read: references/field-list.md

• In-built field list (popup), stand-alone field list (fixed), field list modes, UI interactions, configuration options

📄 Read: references/grouping-bar.md

• Grouping bar configuration, drag-and-drop operations, filter/sort/remove icons, fields panel, value type icon, exclusion options

📄 Read: references/data-shaping.md

• Aggregation functions, calculated fields (defining and editing), summary customization options

📄 Read: references/aggregation.md

• 24+ aggregation types (Sum, Average, Count, etc.), advanced aggregations, base field configuration, runtime modification

📄 Read: references/calculated-field.md

• Interactive calculated field dialog, formula syntax and operators, code-based methods, format settings

📄 Read: references/grouping.md

• Data grouping feature, number grouping with ranges, date grouping with hierarchies, programmatic configuration, ungrouping

📄 Read: references/data-formatting.md

• Number formatting, conditional formatting, cell styling, tooltip customization

📄 Read: references/grid-customization.md

• Cell templates, row heights, column widths, text alignment, column resizing and reordering, dimension configuration

📄 Read: references/row-and-column.md

• Cell template customization, dimension configuration, row height, column width, resizing, reordering, text alignment

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

• Member filtering, label filtering, value filtering, sorting operations, filter customization

📄 Read separately if needed:

• references/member-filtering.md - Select/exclude specific members, interactive filter dialogs, append current selection to existing filters
• references/label-filtering.md - Filter by text patterns, date ranges, numeric ranges
• references/value-filtering.md - Filter by aggregated values, Top/Bottom N members (client-side), clearing value filter
• references/value-sorting.md - Sort by measure values, ranking analysis, multi-level sorting

📄 Read: references/show-hide-totals.md

• Grand totals display, group totals configuration, subtotal calculation options

📄 Read: references/state-persistence.md

• Save and load pivot table state, persistence configuration, state management patterns

📄 Read: references/toolbar.md

• Toolbar controls, button customization, toolbar events and actions

📄 Read: references/tooltip.md

• Tooltip configuration, custom tooltip templates, tooltip formatting

📄 Read: references/hyperlink.md

• Hyperlink configuration, cell linking, navigation setup, link customization

Navigation & Analysis

📄 Read: references/drill.md

• Drill-down and drill-through functionality, hierarchical data exploration, editing capabilities

📄 Read separately if needed:

• references/drill-down.md - Drill-down specific features
• references/drill-through.md - Drill-through and raw data exploration

Export & Output

📄 Read: references/export.md

• Excel export, PDF export, export configurations, custom export handlers

📄 Read separately if needed:

• references/excel-export.md - Excel export details
• references/pdf-export.md - PDF export details

📄 Read: references/print.md

• Pivot table printing, chart printing, print configurations, browser compatibility

Advanced & Performance

📄 Read: references/defer-update.md

• Deferred layout updates, Apply button, batch field operations, performance optimization for large datasets

📄 Read: references/performance.md

• Virtual scrolling, paging configuration, performance best practices, data compression

📄 Read separately if needed:

• references/virtual-scrolling.md - Efficient rendering of 100K+ rows, virtual scroll settings, responsive optimization

Quick Start

Install the Tailwind 3 theme package. Each component in this theme package includes an index.css file that automatically loads all required dependency styles.

npm install @syncfusion/ej2-tailwind3-theme --save

By default, Vite projects include an index.css file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the index.css file to prevent style conflicts.

The required styles for the Pivot Table component are imported in the src/App.css file:

/* App.css */
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css';

import { PivotViewComponent, Inject, GroupingBar, FieldList, IDataSet } from '@syncfusion/ej2-react-pivotview';
import './App.css';

const pivotData: IDataSet[] = [
  { Country: 'USA', Product: 'Laptops', Sales: 5000, Year: 2020 },
  { Country: 'USA', Product: 'Mobiles', Sales: 3000, Year: 2020 },
  { Country: 'Canada', Product: 'Laptops', Sales: 2500, Year: 2020 },
  { Country: 'Canada', Product: 'Mobiles', Sales: 1500, Year: 2020 }
];

function cellTemplate(props: any): JSX.Element {
  return (
    <span style={{ fontWeight: 'bold', color: '#333' }}>
      {props.cellInfo?.value}
    </span>
  );
}

function App() {
  const dataSourceSettings: DataSourceSettingsModel = {
    dataSource: pivotData as IDataSet[],
    rows: [{ name: 'Country' }],
    columns: [{ name: 'Product' }],
    values: [{ name: 'Sales', caption: 'Total Sales' }],
    showGrandTotals: true
  };

  return (
    <PivotViewComponent
      id="pivotview"
      dataSourceSettings={dataSourceSettings}
      cellTemplate={cellTemplate}
      showGroupingBar={true}
      showFieldList={true}
      height={350}
    >
      <Inject services={[GroupingBar, FieldList]} />
    </PivotViewComponent>
  );
}

export default App;

Common Patterns

Pattern 1: Basic Pivot Table with Row and Column Fields

const dataSourceSettings: DataSourceSettingsModel = {
  dataSource: data as IDataSet[],
  rows: [{ name: 'Country' }, { name: 'Region' }],
  columns: [{ name: 'Year' }, { name: 'Quarter' }],
  values: [{ name: 'Sales', caption: 'Total Sales' }]
};

Pattern 2: Adding Filters and Aggregation

const dataSourceSettings: DataSourceSettingsModel = {
  dataSource: data as IDataSet[],
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [
    { name: 'Sales', type: 'Sum' },
    { name: 'Quantity', type: 'Avg' }
  ],
  filters: [{ name: 'Year' }]
};

Pattern 3: Calculated Fields

import { PivotViewComponent, Inject, CalculatedField, FieldList } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

const dataSourceSettings: DataSourceSettingsModel = {
  dataSource: data as IDataSet[],
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [
    { name: 'Sold', caption: 'Units Sold' },
    { name: 'Amount', caption: 'Amount' },
    { name: 'Total', caption: 'Total', type: 'CalculatedField' }  // ← Must add to values
  ],
  calculatedFieldSettings: [
    {
      name: 'Total',
      formula: '"Sum(Amount)"+"Sum(Sold)"'  // ← Formula with aggregation functions
    }
  ]
};

Pattern 4: Cell Template with Conditional Formatting

function cellTemplate(props: any): JSX.Element {
  const value = props.cellInfo?.value;
  const isTotal = props.cellInfo?.isGrandTotal || props.cellInfo?.isDeserialized;
  
  const getStyle = () => {
    const numValue = parseFloat(value);
    if (numValue > 4000) return { color: '#4CAF50', fontWeight: 'bold' }; // Green for high values
    if (numValue < 1000) return { color: '#f44336', fontWeight: 'bold' }; // Red for low values
    return { color: '#333' };
  };

  return (
    <span style={getStyle()}>
      {isTotal ? <strong>{value}</strong> : value}
    </span>
  );
}

const dataSourceSettings: DataSourceSettingsModel = {
  dataSource: data as IDataSet[],
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [{ name: 'Sales' }]
};

Key Props & Configuration

GridSettings Configuration

• rowHeight: Specifies row height in pixels
• columnWidth: Sets default column width
• allowResizing: Enables column/row resizing
• allowReordering: Allows drag-and-drop field reordering
• allowTextWrap: Enables text wrapping in cells
• columnRender: Event handler for column customization (e.g., text alignment)

Related Skills

• Syncfusion React Grid - For general data grid functionality
• React Data Binding - For data source management patterns