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, not Angular/Vue/Blazor.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
38 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
More from this repository
name
syncfusion-react-pivot-table
description
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, not Angular/Vue/Blazor.
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:
Use Local Data: Prefer local, in-memory data sources for maximum security
Validate Remote Sources: Only connect to authenticated and authorized API endpoints under your control
Sanitize User Input: Never allow users to specify arbitrary URLs or data sources
: Always use authentication headers and secure API endpoints
Implement Authentication
Content Validation: Validate and sanitize all data received from external sources before binding
Use HTTPS: Always use HTTPS for remote data connections
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
Install the Tailwind 3 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:
