SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillssyncfusion-vue-pivot-table

syncfusion-vue-pivot-table

Frontend & websites

View repository

Updated 10-16 01:49

About this skill

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
  • Core APIs & Properties
  • Events
  • Getting Started
  • Data Binding & Sources
  • Data Operations & Formatting
  • Data Analysis & Pivot Operations
  • Drill-Down & Navigation
  • Visualization & Layout
  • Export & Toolbar
  • 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

// 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:

<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

📄 Read: references/getting-started.md

  • 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 Studio
  • Vue 2 and Vue 3 compatibility
  • Field List Component - UI for dynamic field configuration
  • Grouping Bar Component - Inline field organization and drag-drop
  • Loading States & Indicators - Managing UI feedback during data loading
  • Accessibility Basics - WCAG compliance, keyboard navigation, screen readers

Data Binding & Sources

JSON Data Binding

📄 Read: references/data-binding.md

  • 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 datasets
  • Complex Data Binding Patterns - Multi-source, real-time updates, lazy loading

External Data Sources

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

  • MySQL database connections
  • SQL Server integration
  • MongoDB connectivity
  • PostgreSQL, Oracle, Elasticsearch, Snowflake
  • Creating Web API controllers for data retrieval

OLAP (Analysis Services)

📄 Read: references/olap.md

  • 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

📄 Read: references/data-formatting.md

  • Number formatting (currency, percentages, decimals)
  • Date and time value formatting
  • Custom format patterns
  • Format settings configuration
  • Internationalization & Localization - Multi-language support, RTL, regional formatting
  • Accessible Styling - High contrast, color-blind friendly, font sizing

Conditional Formatting

📄 Read: references/conditional-formatting.md

  • 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

📄 Read: references/data-shaping.md

  • Defining rows, columns, and values
  • Field hierarchy and nesting
  • Captions and field organization
  • Expand/collapse behaviors
  • Configuration best practices

Row & Column Properties

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

  • Setting width and height (pixels, percentage, auto)
  • Row height customization
  • Column width settings
  • Responsive sizing
  • Minimum width guarantees

Show/Hide Totals

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

  • Grand total visibility control
  • Subtotal positioning and display
  • Summary row configuration
  • Conditional total display

Data Analysis & Pivot Operations

Filtering Data

📄 Read: references/filtering.md

  • 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

📄 Read: references/sorting.md

  • 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

📄 Read: references/aggregation-and-calculated-fields.md

  • 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

📄 Read: references/grouping.md

  • 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

📄 Read: references/editing.md

  • 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

📄 Read: references/drill-down-up.md

  • 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

📄 Read: references/report-manipulation.md

  • 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

📄 Read: references/hyperlink.md

  • 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

📄 Read: references/classic-layout.md

  • 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

📄 Read: references/pivot-chart.md

  • 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

📄 Read: references/tooltip.md

  • 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

📄 Read: references/export.md

  • Excel export (.xlsx format)
  • CSV export functionality
  • PDF export capabilities
  • Export method invocation
  • Toolbar export options
  • Data preservation during export

Toolbar & Report Management

📄 Read: references/toolbar.md

  • 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

📄 Read: references/state-persistence.md

  • Enable persistence (enablePersistence)
  • Automatic state saving to local storage
  • Layout retention across sessions
  • Save and load pivot layout programmatically
  • getPersistData() and loadPersistData() methods
  • Custom persistence workflows

Performance Best Practices

📄 Read: references/performance.md

  • 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
dataSourceSettings Object Defines data source, fields, and aggregation rules
gridSettings Object Controls layout, dimensions, and grid behavior
displayOption Object Controls Grid vs Chart visibility
chartSettings Object Configures chart type and appearance
hyperlinkSettings Object Enables and configures hyperlinks
allowExcelExport Boolean Enables Excel export functionality
allowPaging Boolean Enables paging for large datasets
enableVirtualization Boolean Enables virtual scrolling
enablePersistence Boolean Preserves component state in local storage
showFieldList Boolean Displays field list UI
showGroupingBar Boolean Displays grouping bar UI

When to Read Each Reference

  • Need to set up PivotView? → getting-started.md
  • Binding data? → data-binding.md or connecting-to-data-source.md
  • Configuring fields/layout? → data-shaping.md, row-and-column.md
  • Adding drill-down? → drill-down-up.md, report-manipulation.md
  • Showing charts? → pivot-chart.md
  • Adding hyperlinks? → hyperlink.md
  • Exporting data? → export.md, toolbar.md
  • Saving state? → state-persistence.md
  • Optimizing performance? → performance.md

Next Steps

  1. Start with getting-started.md to set up your first PivotView
  2. Bind your data using data-binding.md or connecting-to-data-source.md
  3. Configure fields and layout with data-shaping.md
  4. Customize appearance and behavior with the relevant reference guides
  5. Implement export and persistence features as needed
  6. Optimize performance for large datasets using performance.md