syncfusion-vue-pivot-table

# Implementing Syncfusion Vue PivotView The Syncfusion Vue 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 ## Table of Contents - [Overview](#overview) - [Core APIs & Properties](#core-apis--properties) - [Events](#events) - [Getting Started](#getting-started) - [Data Binding & Sources](#data-binding--sources) - [Data Operations & Formatting](#data-operations--formatting) - [Data Analysis & Pivot Operations](#data-analysis--pivot-operations) - [Drill-Down & Navigation](#drill-down--navigation) - [Visualization & Layout](#visualization--layout) - [Export & Toolbar](#export--toolbar) - [State & Performance](#state--performance) --- ## Overview The Syncfusion Vue PivotView (Pivot Table) component provides a powerful, interactive way to analyze and visualize large datasets. It supports: - **Multiple data sources** (JSON, OLAP, relational databases like MySQL, SQL Server, MongoDB) - **Rich drill-down functionality** for detailed exploration - **Pivot charts** for visual data representation - **Export to Excel, CSV, and PDF** - **Customizable layouts** (Compact and Classic/Tabular) - **Performance optimization** for large datasets - **State persistence** for user experience continuity Use this skill whenever implementing: - Pivot Tables in Vue applications - Data aggregation and analysis UI - Interactive data exploration interfaces - Business intelligence dashboards --- ## Core APIs & Properties ### Component Props | Property | Type | Description | |----------|------|-------------| | `dataSourceSettings` | `IDataOptions` | Configure data source, rows, columns, values, filters, formatting | | `height` | `number \| string` | Set component height in pixels or percentage | | `width` | `number \| string` | Set component width in pixels or percentage | | `gridSettings` | `IGridSettings` | Control layout (Compact/Tabular), column width, row height, resizing | | `displayOption` | `IDisplayOption` | Control Grid vs Chart view: `{ view: 'Grid' \| 'Chart' \| 'Both' }` | | `chartSettings` | `IChartSettings` | Configure chart type, series, legend, axes, tooltip | | `groupingBarSettings` | `IGroupingBarSettings` | Customize grouping bar appearance and behavior | | `allowExcelExport` | `boolean` | Enable Excel export functionality | | `allowPdfExport` | `boolean` | Enable PDF export functionality | | `allowCsvExport` | `boolean` | Enable CSV export functionality | | `allowMemberFilter` | `boolean` | Enable member filtering in UI | | `allowLabelFilter` | `boolean` | Enable label filtering in UI | | `allowValueFilter` | `boolean` | Enable value filtering in UI | | `allowSorting` | `boolean` | Enable sorting functionality | | `allowDrilling` | `boolean` | Enable drill-down/drill-through actions | | `allowDrillThrough` | `boolean` | Enable drill-through to detail data (more granular than allowDrilling) | | `allowResizing` | `boolean` | Enable column and row resizing | | `allowNumberFormatting` | `boolean` | Show number formatting options in toolbar and dialogs | | `allowConditionalFormatting` | `boolean` | Enable conditional formatting feature via toolbar button | | `allowCalculatedField` | `boolean` | Enable calculated field creation | | `showFieldList` | `boolean` | Display field list panel (UI for field configuration) | | `showGroupingBar` | `boolean` | Display grouping bar at top (UI for drag-drop field organization) | | `showToolbar` | `boolean` | Display toolbar with export/report/field management buttons | | `toolbar` | `string[]` | Array of toolbar items: `['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', 'Grid', 'Chart', 'MDX', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList']` | | `showTooltip` | `boolean` | Display tooltips when hovering over cells | | `enablePersistence` | `boolean` | Save pivot state to local storage automatically | | `conditionalFormatSettings` | `IConditionalFormatSettings[]` | Pre-define conditional formatting rules: value ranges, operators, styling | | `aggregateTypes` | `string[]` | Limit available aggregation types in dropdown | | `maxNodeLimitInMemberEditor` | `number` | Maximum members to load in member filter dialog (default 1000) | | `saveReport` | `Function(args)` | Callback when user saves a report via toolbar | | `loadReport` | `Function(args)` | Callback when user loads a report via toolbar | | `renameReport` | `Function(args)` | Callback when user renames a report via toolbar | | `removeReport` | `Function(args)` | Callback when user removes a report via toolbar | | `newReport` | `Function(args)` | Callback when user creates a new report via toolbar | | `fetchReport` | `Function()` | Callback to retrieve list of saved reports | ### DataSourceSettings Properties | Property | Type | Description | |----------|------|-------------| | `dataSource` | `any[]` | JSON array or DataManager instance with data | | `type` | `'JSON' \| 'CSV'` | Data source type (default: 'JSON') | | `rows` | `IField[]` | Fields to display in row axis | | `columns` | `IField[]` | Fields to display in column axis | | `values` | `IField[]` | Value/measure fields for aggregation | | `filters` | `IField[]` | Fields to display in filter axis | | `expandAll` | `boolean` | Expand all row/column groups initially | | `drilledMembers` | `IDrilledMember[]` | Pre-drilled members: `[{ name: 'Country', items: ['France'] }]` | | `filterSettings` | `IFilter[]` | Member/label/value filters to apply | | `sortSettings` | `ISort[]` | Sort rules for fields | | `formatSettings` | `IFormatSettings[]` | Number formatting: `[{ name: 'Amount', format: 'C0' }]` | | `calculatedFieldSettings` | `ICalculatedFieldSettings[]` | Calculated field formulas | ### Core Methods ```typescript // Export methods excelExport() // Export pivot to Excel (.xlsx) pdfExport() // Export pivot to PDF csvExport() // Export pivot to CSV // Dialog methods createCalculatedFieldDialog() // Show calculated field creation dialog showConditionalFormattingDialog() // Open conditional formatting dialog createDrillThroughDialog() // Show drill-through data dialog // Data manipulation refresh() // Refresh pivot with current settings setProperties({...}) // Update properties dynamically // Data retrieval getFieldList() // Get all available fields from data source getDataSourceSettings() // Get current dataSourceSettings configuration // Persistence getPersistData() // Get serialized pivot state loadPersistData(data) // Restore pivot state ``` --- ## Events All events from PivotViewComponent documentation are listed below. Use Vue's `:eventName="handler"` syntax to bind. ### Data Manipulation Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **actionBegin** | `dataSourceSettings`, `actionName`, `fieldInfo`, `cancel` | Before any pivot operation (filtering, sorting, aggregation, calculated field) | | **actionComplete** | `dataSourceSettings`, `actionName`, `fieldInfo`, `actionInfo` | After pivot operation completes successfully | | **actionFailure** | `actionName`, `errorInfo` | Pivot operation fails or encounters error | **Common actionName values:** - `"Aggregate field"` - When aggregation type is selected - `"Field filtered"` - When member/label/value filter applied - `"Field sorted"` - When field sorted via UI - `"Edit pivot table"` - When cell edited in pivot - `"Remove field"` / `"Add field"` - When field removed/added from grouping bar ### Cell Interaction Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **aggregateCellInfo** | `rowHeaders`, `columnHeaders`, `value`, `valueField`, `aggregateType` | Each value cell renders (use to override value or skip formatting) | | **cellClick** | Cell coordinates, member info | User clicks on pivot cell | | **cellDoubleClick** | Cell coordinates, member info | User double-clicks on pivot cell | ### Field Configuration Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **calculatedFieldCreate** | `calculatedField`, `calculatedFieldSettings`, `fieldName`, `dataSourceSettings`, `cancel` | User creates/edits calculated field in dialog | ### Export Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **beforeExcelExport** | `dataSourceSettings`, `isCollapsedStateSaved` | Before Excel export starts | | **excelExportComplete** | Export result data | After Excel export completes | | **beforePdfExport** | `dataSourceSettings`, `isCollapsedStateSaved` | Before PDF export starts | | **pdfExportComplete** | Export result data | After PDF export completes | | **beforePrint** | `dataSourceSettings` | Before printing starts | | **printComplete** | Print result | After printing completes | ### Drill & Expand Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **drillThrough** | Row/column headers, raw data records | User initiates drill-through action | | **beginDrillThrough** | Cell context, member info | Before drill-through action starts (set `args.cancel = true` to prevent) | ### Field Configuration & Grouping Bar Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **fieldDrop** | Field being dropped, destination axis (rows/columns/values/filters) | Field dropped in grouping bar to add it | | **fieldDragStart** | Field being dragged, source axis | Field drag initiated from grouping bar | | **fieldRemove** | Field being removed, source axis | Field removed from grouping bar | | **onFieldDropped** | Field dropped, destination axis | After field successfully dropped (similar to fieldDrop but triggers after) | | **aggregateMenuOpen** | Field, current aggregation type | Aggregation type dropdown opened in grouping bar/field list | ### Export Customization Events | Event | Parameters | Triggered When | |-------|-----------|-----------------| | **excelQueryCellInfo** | Cell data, row/column info, cell type | For each cell during Excel export (customize cell styling, value, formatting) | | **excelHeaderQueryCellInfo** | Header cell info, row/column hierarchy | For each header cell in Excel export (customize header styling) | | **pdfQueryCellInfo** | Cell data, row/column info, pdfCell | For each cell during PDF export (customize PDF cell appearance) | | **headerCellInfo** | Header cell context, style info | For each header cell render in UI (customize header appearance) | | **queryCellInfo** | Value cell data, style, aggregateType | For each value cell render in UI (customize cell appearance, value, formatting) | **Example Event Usage:**