Skip to main content Home Creators syncfusion vue-ui-components-skills syncfusion-vue-pivot-table
syncfusion-vue-pivot-table Use this skill when users ask how to implement Syncfusion PivotView pivot tables in Vue. Trigger for Vue pivot grid/OLAP analysis, measures/dimensions, data binding, drill-down/drill-through, grouping, filtering, calculated fields, conditional formatting, exports, or pivot charts. Vue-only, not React/Angular/Blazor.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
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.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-pivot-tableThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-vue-pivot-table description Use this skill when users ask how to implement Syncfusion PivotView pivot tables in Vue. Trigger for Vue pivot grid/OLAP analysis, measures/dimensions, data binding, drill-down/drill-through, grouping, filtering, calculated fields, conditional formatting, exports, or pivot charts. Vue-only, not React/Angular/Blazor. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Grids"}
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:
Use Local Data : Prefer local, in-memory data sources for maximum securityValidate Remote Sources : Only connect to authenticated and authorized API endpoints under your controlSanitize User Input : Never allow users to specify arbitrary URLs or data sourcesImplement Authentication : Always use authentication headers and secure API endpoints
Content Validation
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 behaviorData Exfiltration : Malicious data sources could attempt to extract sensitive informationCode 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 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 explorationPivot charts for visual data representationExport to Excel, CSV, and PDF Customizable layouts (Compact and Classic/Tabular)Performance optimization for large datasetsState 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 dataSourceSettingsIDataOptionsConfigure data source, rows, columns, values, filters, formatting heightnumber | stringSet component height in pixels or percentage widthnumber | stringSet component width in pixels or percentage gridSettingsIGridSettingsControl layout (Compact/Tabular), column width, row height, resizing displayOptionIDisplayOptionControl Grid vs Chart view: { view: 'Grid' | 'Chart' | 'Both' } chartSettingsIChartSettingsConfigure chart type, series, legend, axes, tooltip groupingBarSettingsIGroupingBarSettingsCustomize grouping bar appearance and behavior allowExcelExportbooleanEnable Excel export functionality allowPdfExportbooleanEnable PDF export functionality allowCsvExportbooleanEnable CSV export functionality allowMemberFilterbooleanEnable member filtering in UI allowLabelFilterbooleanEnable label filtering in UI allowValueFilterbooleanEnable value filtering in UI allowSortingbooleanEnable sorting functionality allowDrillingbooleanEnable drill-down/drill-through actions allowDrillThroughbooleanEnable drill-through to detail data (more granular than allowDrilling) allowResizingbooleanEnable column and row resizing allowNumberFormattingbooleanShow number formatting options in toolbar and dialogs allowConditionalFormattingbooleanEnable conditional formatting feature via toolbar button allowCalculatedFieldbooleanEnable calculated field creation showFieldListbooleanDisplay field list panel (UI for field configuration) showGroupingBarbooleanDisplay grouping bar at top (UI for drag-drop field organization) showToolbarbooleanDisplay toolbar with export/report/field management buttons toolbarstring[]Array of toolbar items: ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', 'Grid', 'Chart', 'MDX', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList'] showTooltipbooleanDisplay tooltips when hovering over cells enablePersistencebooleanSave pivot state to local storage automatically conditionalFormatSettingsIConditionalFormatSettings[]Pre-define conditional formatting rules: value ranges, operators, styling aggregateTypesstring[]Limit available aggregation types in dropdown maxNodeLimitInMemberEditornumberMaximum members to load in member filter dialog (default 1000) saveReportFunction(args)Callback when user saves a report via toolbar loadReportFunction(args)Callback when user loads a report via toolbar renameReportFunction(args)Callback when user renames a report via toolbar removeReportFunction(args)Callback when user removes a report via toolbar newReportFunction(args)Callback when user creates a new report via toolbar fetchReportFunction()Callback to retrieve list of saved reports
DataSourceSettings Properties Property Type Description dataSourceany[]JSON array or DataManager instance with data type'JSON' | 'CSV'Data source type (default: 'JSON') rowsIField[]Fields to display in row axis columnsIField[]Fields to display in column axis valuesIField[]Value/measure fields for aggregation filtersIField[]Fields to display in filter axis expandAllbooleanExpand all row/column groups initially drilledMembersIDrilledMember[]Pre-drilled members: [{ name: 'Country', items: ['France'] }] filterSettingsIFilter[]Member/label/value filters to apply sortSettingsISort[]Sort rules for fields formatSettingsIFormatSettings[]Number formatting: [{ name: 'Amount', format: 'C0' }] calculatedFieldSettingsICalculatedFieldSettings[]Calculated field formulas
Core Methods
excelExport ()
pdfExport ()
csvExport ()
createCalculatedFieldDialog ()
showConditionalFormattingDialog ()
createDrillThroughDialog ()
refresh ()
setProperties ({...})
getFieldList ()
getDataSourceSettings ()
getPersistData ()
loadPersistData (data)
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, cancelBefore any pivot operation (filtering, sorting, aggregation, calculated field) actionComplete dataSourceSettings, actionName, fieldInfo, actionInfoAfter pivot operation completes successfully actionFailure actionName, errorInfoPivot 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, aggregateTypeEach 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, cancelUser creates/edits calculated field in dialog
Export Events Event Parameters Triggered When beforeExcelExport dataSourceSettings, isCollapsedStateSavedBefore Excel export starts excelExportComplete Export result data After Excel export completes beforePdfExport dataSourceSettings, isCollapsedStateSavedBefore PDF export starts pdfExportComplete Export result data After PDF export completes beforePrint dataSourceSettingsBefore 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)
<template>
<ejs-pivotview
:dataSourceSettings="dataSourceSettings"
@actionBegin="onActionBegin"
@actionComplete="onActionComplete"
@aggregateCellInfo="onAggregateCellInfo">
</ejs-pivotview>
</template>
<script setup>
const onActionBegin = (args) => {
if (args.actionName === 'Aggregate field') {
console.log('User changing aggregation for:', args.fieldInfo.name);
// Set args.cancel = true to prevent action
}
};
const onActionComplete = (args) => {
if (args.actionName === 'Field filtered') {
console.log('Filter applied successfully');
}
};
const onAggregateCellInfo = (args) => {
// Override cell value: args.value = customValue;
// Skip formatting: args.isFormatted = false;
};
</script>
Getting Started
Installation steps and dependencies
Setting up a basic PivotView
Configuration fundamentals
CSS imports and theming — including the Tailwind 3 single-import theme package (@syncfusion/ej2-tailwind3-theme)Theme application methods — npm theme package, CDN, CRG, Theme StudioVue 2 and Vue 3 compatibility
Field List Component - UI for dynamic field configurationGrouping Bar Component - Inline field organization and drag-dropLoading States & Indicators - Managing UI feedback during data loadingAccessibility Basics - WCAG compliance, keyboard navigation, screen readers
Data Binding & Sources
JSON Data Binding
Binding local JSON data
Using DataManager with JsonAdaptor
File upload and JSON loading
Local vs remote data approaches
Server-Side Pivot Processing - Backend aggregation for large datasetsComplex Data Binding Patterns - Multi-source, real-time updates, lazy loading
External Data Sources
MySQL database connections
SQL Server integration
MongoDB connectivity
PostgreSQL, Oracle, Elasticsearch, Snowflake
Creating Web API controllers for data retrieval
OLAP (Analysis Services)
SQL Server Analysis Services (SSAS) configuration
OLAP field naming convention [Dimension].[Hierarchy]
Connecting to SSAS cubes for multi-dimensional analysis
Handling massive datasets (millions of rows)
OLAP vs JSON binding comparison
Drill-down with OLAP hierarchies
Data Operations & Formatting
Data Formatting
Number formatting (currency, percentages, decimals)
Date and time value formatting
Custom format patterns
Format settings configuration
Internationalization & Localization - Multi-language support, RTL, regional formattingAccessible Styling - High contrast, color-blind friendly, font sizing
Conditional Formatting
Enable conditional formatting feature
Define formatting rules with conditions and operators
Apply styles based on cell values (backgroundColor, color, fontFamily, etc.)
Pre-define rules in dataSourceSettings
Show conditional formatting dialog via toolbar
Dynamic rule modification and effects
Data Shaping & Field Configuration
Defining rows, columns, and values
Field hierarchy and nesting
Captions and field organization
Expand/collapse behaviors
Configuration best practices
Row & Column Properties
Setting width and height (pixels, percentage, auto)
Row height customization
Column width settings
Responsive sizing
Minimum width guarantees
Show/Hide Totals
Grand total visibility control
Subtotal positioning and display
Summary row configuration
Conditional total display
Data Analysis & Pivot Operations
Filtering Data
Member filtering (include/exclude specific members, select all, search, sort)
Label filtering (contains, starts with, ends with, between, etc., for string, number, and date)
Value filtering (filter by aggregated value ranges, including Top N and Bottom N )
Programmatic filter configuration via filterSettings
Filter dialog UI features (search, select all, sort, append current selection to filter )
OLAP-specific options: loadOnDemandInMemberEditor and levelCount
Large dataset filter optimization with maxNodeLimitInMemberEditor
Filter-related events: memberFiltering, memberEditorOpen, actionBegin, actionComplete, actionFailure
Sorting Fields & Values
Member sorting (ascending/descending)
Value sorting (sort by aggregated values)
Custom sorting (user-defined member order)
Alphanumeric sorting (numeric vs alphabetical)
Sort settings configuration
Multi-level sorting in complex hierarchies
Aggregation & Calculated Fields
Aggregation types (Sum, Average, Count, Min, Max, etc.)
Percentage aggregations (% of Total, % of Row, % of Parent, etc.)
Comparative aggregations (Difference From, Percentage Difference)
Running totals and percentage of running totals (cumulative % of running totals; client-side engine only)
Aggregation dropdown customization
Hiding aggregation labels for cleaner UI
Calculated fields and custom formulas
Grouping Data
Number grouping (ranges like 1-5, 6-10)
Date grouping (Year, Quarter, Month, Week, Day)
Custom grouping (business-specific categories)
Programmatic grouping configuration
Multi-type grouping in same pivot
Grouping UI operations and ungroup functionality
Editing Cell Data
Cell editing modes (Normal, Dialog, Batch, Command Columns)
CRUD operations (Create, Read, Update, Delete)
Edit settings configuration
Confirmation dialogs for safety
Edit events and validation
Bulk editing with batch mode
Data Grid Editor Configuration - Grid behavior, selection, performance, pagination
Drill-Down & Navigation
Drill-Down & Drill-Up
Expand/collapse hierarchical data
Drill position and specific member drilling
expandAll property configuration
Expand specific fields only
Drill member exclusions
Position-aware drilling
Report Manipulation
Dynamic report modification
Field list interactions
Grouping bar operations
Report updates and refresh
Loading Predefined Reports - Report templates, server-side templates, initial report loading
Hyperlinks
Enable hyperlinks in cells
Hyperlink settings configuration
Row header hyperlinks
Column header hyperlinks
Value cell hyperlinks
Summary cell hyperlinks
Conditional hyperlink rules
Custom CSS styling
Visualization & Layout
Classic/Tabular Layout
Tabular layout benefits and setup
Row field side-by-side display
Grand total positioning
Subtotal placement
Layout configuration (gridSettings.layout)
Limitations and compatibility notes
Pivot Chart Integration
Pivot Chart setup and display modes
21+ chart types (Line, Column, Area, Bar, Bubble, Scatter, etc.)
Display options (Grid only, Chart only, Both)
Primary view selection
Chart customization (series, axes, legends)
Drill-down in charts
Tooltip Configuration
Enable/disable tooltips with showTooltip property
Custom tooltip templates with HTML and dynamic placeholders
Template placeholders: ${rowHeaders}, ${columnHeaders}, ${valueField}, ${aggregateType}, ${value}
Basic and advanced template examples with CSS styling
Chart-specific tooltips via chartSettings.tooltip
Tooltip positioning and mobile considerations
Accessibility best practices and keyboard support
Export & Toolbar
Export to Excel & PDF
Excel export (.xlsx format)
CSV export functionality
PDF export capabilities
Export method invocation
Toolbar export options
Data preservation during export
Toolbar & Report Management
Enable toolbar with showToolbar property
Configure toolbar items array (New, Save, SaveAs, Load, Rename, Remove, Grid, Chart, Export, ConditionalFormatting, etc.)
Report lifecycle callbacks: saveReport(), loadReport(), renameReport(), removeReport()
fetchReport() to retrieve saved reports
Custom toolbar items and styling
Report data persistence and retrieval
Sizing & Layout Configuration - Component dimensions, responsive behavior, container sizing
State & Performance
State Persistence
Enable persistence (enablePersistence)
Automatic state saving to local storage
Layout retention across sessions
Save and load pivot layout programmatically
getPersistData() and loadPersistData() methodsCustom persistence workflows
Performance Best Practices
Virtual scrolling for large datasets
Paging implementation
Server-side pivot engine
Data compression techniques
Defer layout update feature
Sorting optimization
Member filtering performance
Grouping impacts and alternatives
Quick Start Example <template>
<div id="app">
<ejs-pivotview
:dataSourceSettings="dataSourceSettings"
:height="height"
:width="width"
:gridSettings="gridSettings"
:showFieldList="showFieldList">
</ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
import { provide } from "vue";
const dataSourceSettings = {
dataSource: pivotData,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' }
],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
const height = '450px';
const width = '100%';
const showFieldList = true;
const gridSettings = { columnWidth: 120, layout: 'Compact' };
provide('pivotview', [FieldList]);
</script>
<style>
/* Tailwind 3 theme package — single import covers all Pivot Table dependencies */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css";
</style>
Common Patterns
Pattern 1: Aggregated Analysis Define rows, columns, and values to create aggregated summaries of your data.
Pattern 2: Drill-Down Exploration Use expandAll: false with drill-down icons to allow users to explore hierarchical data.
Pattern 3: Multi-Source Analysis Use dataSourceSettings.type to bind different data sources (JSON, OLAP, relational databases).
Pattern 4: Visual Representation Enable Pivot Chart with displayOption: { view: 'Chart' } for graphical insights.
Pattern 5: Large Dataset Handling Combine virtualScrolling: true, allowPaging: true, or server-side engine for performance.
Key Props Reference Prop Type Purpose dataSourceSettingsObject Defines data source, fields, and aggregation rules gridSettingsObject Controls layout, dimensions, and grid behavior displayOptionObject Controls Grid vs Chart visibility chartSettingsObject Configures chart type and appearance hyperlinkSettingsObject Enables and configures hyperlinks allowExcelExportBoolean Enables Excel export functionality allowPagingBoolean Enables paging for large datasets enableVirtualizationBoolean Enables virtual scrolling enablePersistenceBoolean Preserves component state in local storage showFieldListBoolean Displays field list UI showGroupingBarBoolean Displays grouping bar UI
When to Read Each Reference
Need to set up PivotView? → getting-started.mdBinding data? → data-binding.md or connecting-to-data-source.mdConfiguring fields/layout? → data-shaping.md, row-and-column.mdAdding drill-down? → drill-down-up.md, report-manipulation.mdShowing charts? → pivot-chart.mdAdding hyperlinks? → hyperlink.mdExporting data? → export.md, toolbar.mdSaving state? → state-persistence.mdOptimizing performance? → performance.md
Next Steps More from this repository
Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application.
Comprehensive guide for implementing Syncfusion Vue Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and reactive data patterns in Vue 3 applications using Composition API.
syncfusion-vue-data-manager Implements Syncfusion Vue DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Related occupations SOC
Based on SOC occupation classification
