syncfusion-react-pivot-table
Use this skill when users ask how to build or customize Syncfusion PivotView pivot tables in React. Trigger for React pivot grid/OLAP, aggregation, data binding (JSON/remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. React-only,
By syncfusion · 611 installs
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-pivot-table
Source repository · Upstream listing
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](references/getting started.md)
Installation, package setup, basic component creation, CSS imports, NextJS integration
📄 Read (optional): [references/nextjs integration.md](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](references/data binding.md)
JSON data binding, CSV data binding, remote data binding, field mapping, DataManager setup
📄 Read: [references/connecting to databases.md](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](references/connecting to data source.md)
OLAP connections, server side engine configuration, real time data updates
Visualization & Interaction
📄 Read: [references/pivot chart.md](references/pivot chart.md)
Integrating pivot charts, chart types, visualization options, chart customization
📄 Read: [references/classic layout.md](references/classic layout.md)
Classic layout configuration, layout switching, UI control options
📄 Read: [references/drill.md](references/drill.md)
Drill down and drill through functionality, editing, navigation controls, event handling
Data Organization & Display
📄 Read: [references/field list.md](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](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](references/data shaping.md)
Aggregation functions, calculated fields (defining and editing), summary customization options
📄 Read: [references/aggregation.md](references/aggregation.md)
24+ aggregation types (Sum, Average, Count, etc.), advanced aggregations, base field configuration, runtime modification
📄 Read: [references/calculated field.md](references/calculated field.md)
Interactive calculated field dialog, formula syntax and operators, code based methods, format settings
📄 Read: [references/grouping.md](references/grouping.md)
Data grouping feature, number grouping with ranges, date grouping with hierarchies, programmatic configuration, ungrouping
📄 Read: [references/data formatting.md](references/data formatting.md)
Number formatting, conditional formatting, cell styling, tooltip customization
📄 Read: [references/grid customization.md](references/grid customization.md)
Cell templates, row heights, column widths, text alignment, column resizing and reordering, dimension configuration
📄 Read: [references/row and column.md](references/row and column.md)
Cell template customization, dimension configuration, row height, column width, resizing, reordering, text alignment
📄 Read: [references/filtering and sorting.md](references/filtering and sorting.md)
Member filtering, label filtering, value filtering, sorting operations, filter customization
📄 Read separately if needed:
[references/member filtering.md](references/member filtering.md) Select/exclude specific members, interactive filter dialogs, append current selection to existing filters
[references/label filtering.md](references/label filtering.md) Filter by text patterns, date ranges, numeric ranges
[references/value filtering.md](references/value filtering.md) Filter by aggregated values, Top/Bottom N members (client side), clearing value filter
[references/value sorting.md](references/value sorting.md) Sort by measure values, ranking analysis, multi level sorting
📄 Read: [references/show hide totals.md](references/show hide totals.md)
Grand totals display, group totals configuration, subtotal calculation options
📄 Read: [references/state persistence.md](references/state persistence.md)
Save and load pivot table state, persistence configuration, state management patterns
📄 Read: [references/toolbar.md](references/toolbar.md)
Toolbar controls, button customization, toolbar events and actions
📄 Read: [references/tooltip.md](references/tooltip.md)
Tooltip configuration, custom tooltip templates, tooltip formatting
📄 Read: [references/hyperlink.md](references/hyperlink.md)
Hyperlink configuration, cell linking, navigation setup, link customization
Navigation & Analysis
📄 Read: [references/drill.md](references/drill.md)
Drill down and drill through functionality, hierarchical data exploration, editing capabilities
📄 Read separately if needed:
[references/drill down.md](references/drill down.md) Drill down specific features
[references/drill through.md](references/drill through.md) Drill through and raw data exploration
Export & Output
📄 Read: [references/export.md](references/export.md)
Excel export, PDF export, export configurations, custom export handlers
📄 Read separately if needed:
[references/excel export.md](references/excel export.md) Excel export details
[references/pdf export.md](references/pdf export.md) PDF export details
📄 Read: [references/print.md](references/print.md)
Pivot table printing, chart printing, print configurations, browser compatibility
Advanced & Performance
📄 Read: [references/defer update.md](references/defer update.md)
Deferred layout updates, Apply button, batch field operations, performance optimization for large datasets
📄 Read: [references/performance.md](references/performance.md)
Virtual scrolling, paging configuration, performance best practices, data compression
📄 Read separately if needed:
[references/virtual scrolling.md](references/virtual scrolling.md) Efficient rendering of 100K+ rows, virtual scroll settings, responsive optimization
Quick Start
Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2 tailwind3 theme) theme package. Each component in this theme package includes an index.css file that automatically loads all required dependency styles.
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:
Common Patterns
Pattern 1: Basic Pivot Table with Row and Column Fields
Pattern 2: Adding Filters and Aggregation
Pattern 3: Calculated Fields
Pattern 4: Cell Template with Conditional Formatting
Key Props & Configuration
Property Type Description
dataSourceSettings object Configures data source, fields, rows, columns, values, filters, aggregations, calculated fields, and formatting
cellTemplate function Custom cell rendering function that returns JSX.Element for value cells
gridSettings GridSettings Configures row height, column width, text wrapping, resizing, reordering
height string/number Component height in pixels or percentage
width string/number Component width in pixels or percentage
showGroupingBar boolean Shows/hides the grouping bar for drag and drop field management
showFieldList boolean Shows/hides the field list panel (built in or side panel)
allowCalculatedField boolean Enables calculated field creation and editing via Field List dialog
allowExcelExport boolean Enables Excel export functionality
allowPdfExport boolean Enables PDF export functionality
allowMemberFilter boolean Enables member filtering in Field List (select/deselect members)
allowLabelFilter boolean Enables label filtering (filter by text/label values)
allowValueFilter boolean Enables value filtering (filter by aggregated values)
allowDrillThrough boolean Enables drill through functionality to view pivot data
allowConditionalFormatting boolean Enables conditional formatting for cells based on values
allowDeferLayoutUpdate boolean Batches field operations in Field List, apply only on "Apply" click
enableVirtualization boolean Enables virtual scrolling for large datasets
enablePaging boolean Enables paging for row/column distribution
showToolbar boolean Shows/hides the toolbar with preset actions
pageSettings PageSettings Configures row and column page sizes for paging
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