syncfusion-react-pivot-table

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing PivotView in React

在React中实现PivotView

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.

Syncfusion React PivotView组件提供强大的数据分析和报表功能。它允许用户通过交互式数据透视表来组织、分析和汇总多维数据，具备分组、筛选、聚合、钻取分析和导出等功能。

⚠️ 重要提示： 请务必通过查阅此技能中的参考文件（
references/*.md
）来验证API类名、属性和方法签名。这些文件包含经过验证的可用示例。请勿从其他来源假设API细节。

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

在以下场景中使用此技能：

创建用于数据分析的交互式数据透视表
配置数据聚合与汇总
构建动态报表仪表盘
设置带层级结构的行/列分组
实现数据筛选与排序
添加钻取/穿透功能
将报表导出为Excel或PDF格式
优化大数据集的性能
设置数据透视表的样式与格式
在会话间持久化数据透视表状态

Navigation Guide

导航指南

Setup

环境搭建

📄 Read: references/getting-started.md

Installation, package setup, basic component creation, CSS imports, NextJS integration

📄 Read (optional): references/nextjs-integration.md

Next.js App Router and Pages Router setup, dynamic imports, SSR considerations, API routes, deployment

📄 阅读： references/getting-started.md

安装、包配置、基础组件创建、CSS导入、NextJS集成

📄 阅读（可选）： references/nextjs-integration.md

Next.js App Router与Pages Router配置、动态导入、SSR注意事项、API路由、部署

Data Management

数据管理

📄 Read: references/data-binding.md

JSON data binding, CSV data binding, remote data binding, field mapping, DataManager setup

📄 Read: 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

OLAP connections, server-side engine configuration, real-time data updates

📄 阅读： references/data-binding.md

JSON数据绑定、CSV数据绑定、远程数据绑定、字段映射、DataManager配置

📄 阅读： references/connecting-to-databases.md

数据库连接、Web API配置、SQL Server、MySQL、PostgreSQL、MongoDB、Oracle、Elasticsearch、Snowflake

📄 阅读： references/connecting-to-data-source.md

OLAP连接、服务器端引擎配置、实时数据更新

Visualization & Interaction

可视化与交互

📄 Read: references/pivot-chart.md

Integrating pivot charts, chart types, visualization options, chart customization

📄 Read: references/classic-layout.md

Classic layout configuration, layout switching, UI control options

📄 Read: references/drill.md

Drill-down and drill-through functionality, editing, navigation controls, event handling

📄 阅读： references/pivot-chart.md

数据透视图集成、图表类型、可视化选项、图表自定义

📄 阅读： references/classic-layout.md

经典布局配置、布局切换、UI控件选项

📄 阅读： references/drill.md

钻取与穿透功能、编辑、导航控件、事件处理

Data Organization & Display

数据组织与展示

📄 Read: 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

Grouping bar configuration, drag-and-drop operations, filter/sort/remove icons, fields panel, value type icon, exclusion options

📄 Read: references/data-shaping.md

Aggregation functions, calculated fields (defining and editing), summary customization options

📄 Read: references/aggregation.md

25+ aggregation types (Sum, Average, Count, etc.), advanced aggregations, base field configuration, runtime modification

📄 Read: references/calculated-field.md

Interactive calculated field dialog, formula syntax and operators, code-based methods, format settings

📄 Read: references/grouping.md

Data grouping feature, number grouping with ranges, date grouping with hierarchies, programmatic configuration, ungrouping

📄 Read: references/data-formatting.md

Number formatting, conditional formatting, cell styling, tooltip customization

📄 Read: references/grid-customization.md

Cell templates, row heights, column widths, text alignment, column resizing and reordering, dimension configuration

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

Cell template customization, dimension configuration, row height, column width, resizing, reordering, text alignment

📄 Read: references/filtering-and-sorting.md

Member filtering, label filtering, value filtering, sorting operations, filter customization

📄 Read separately if needed:

references/member-filtering.md - Select/exclude specific members, interactive filter dialogs
references/label-filtering.md - Filter by text patterns, date ranges, numeric ranges
references/value-filtering.md - Filter by aggregated values, Top/Bottom N, percentage filtering
references/value-sorting.md - Sort by measure values, ranking analysis, multi-level sorting

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

Grand totals display, group totals configuration, subtotal calculation options

📄 Read: references/state-persistence.md

Save and load pivot table state, persistence configuration, state management patterns

📄 Read: references/toolbar.md

Toolbar controls, button customization, toolbar events and actions

📄 Read: references/tooltip.md

Tooltip configuration, custom tooltip templates, tooltip formatting

📄 Read: references/hyperlink.md

Hyperlink configuration, cell linking, navigation setup, link customization

📄 阅读： references/field-list.md

内置字段列表（弹窗）、独立字段列表（固定）、字段列表模式、UI交互、配置选项

📄 阅读： references/grouping-bar.md

分组栏配置、拖放操作、筛选/排序/移除图标、字段面板、值类型图标、排除选项

📄 阅读： references/data-shaping.md

聚合函数、计算字段（定义与编辑）、汇总自定义选项

📄 阅读： references/aggregation.md

25+种聚合类型（求和、平均值、计数等）、高级聚合、基础字段配置、运行时修改

📄 阅读： references/calculated-field.md

交互式计算字段对话框、公式语法与运算符、代码实现方法、格式设置

📄 阅读： references/grouping.md

数据分组功能、数值范围分组、日期层级分组、程序化配置、取消分组

📄 阅读： references/data-formatting.md

数值格式、条件格式、单元格样式、提示框自定义

📄 阅读： references/grid-customization.md

单元格模板、行高、列宽、文本对齐、列调整大小与重排、维度配置

📄 阅读： references/row-and-column.md

单元格模板自定义、维度配置、行高、列宽、调整大小、重排、文本对齐

📄 阅读： references/filtering-and-sorting.md

成员筛选、标签筛选、值筛选、排序操作、筛选自定义

📄 必要时单独阅读：

references/member-filtering.md - 选择/排除特定成员、交互式筛选对话框
references/label-filtering.md - 按文本模式、日期范围、数值范围筛选
references/value-filtering.md - 按聚合值筛选、Top/Bottom N、百分比筛选
references/value-sorting.md - 按度量值排序、排名分析、多级排序

📄 阅读： references/show-hide-totals.md

总计显示、组总计配置、小计计算选项

📄 阅读： references/state-persistence.md

保存与加载数据透视表状态、持久化配置、状态管理模式

📄 阅读： references/toolbar.md

工具栏控件、按钮自定义、工具栏事件与操作

📄 阅读： references/tooltip.md

提示框配置、自定义提示框模板、提示框格式

📄 阅读： references/hyperlink.md

超链接配置、单元格链接、导航设置、链接自定义

Navigation & Analysis

导航与分析

📄 Read: references/drill.md

Drill-down and drill-through functionality, hierarchical data exploration, editing capabilities

📄 Read separately if needed:

references/drill-down.md - Drill-down specific features
references/drill-through.md - Drill-through and raw data exploration

📄 阅读： references/drill.md

钻取与穿透功能、层级数据探索、编辑能力

📄 必要时单独阅读：

references/drill-down.md - 钻取特定功能
references/drill-through.md - 穿透与原始数据探索

Export & Output

导出与输出

📄 Read: references/export.md

Excel export, PDF export, export configurations, custom export handlers

📄 Read separately if needed:

references/excel-export.md - Excel export details
references/pdf-export.md - PDF export details

📄 Read: references/print.md

Pivot table printing, chart printing, print configurations, browser compatibility

📄 阅读： references/export.md

Excel导出、PDF导出、导出配置、自定义导出处理程序

📄 必要时单独阅读：

references/excel-export.md - Excel导出详情
references/pdf-export.md - PDF导出详情

📄 阅读： references/print.md

数据透视表打印、图表打印、打印配置、浏览器兼容性

Advanced & Performance

高级与性能

📄 Read: references/defer-update.md

Deferred layout updates, Apply button, batch field operations, performance optimization for large datasets

📄 Read: references/performance.md

Virtual scrolling, paging configuration, performance best practices, data compression

📄 Read separately if needed:

references/virtual-scrolling.md - Efficient rendering of 100K+ rows, virtual scroll settings, responsive optimization

📄 阅读： references/defer-update.md

延迟布局更新、应用按钮、批量字段操作、大数据集性能优化

📄 阅读： references/performance.md

虚拟滚动、分页配置、性能最佳实践、数据压缩

📄 必要时单独阅读：

references/virtual-scrolling.md - 高效渲染10万+行、虚拟滚动设置、响应式优化

Quick Start

快速开始

typescript

import { PivotViewComponent, Inject, GroupingBar, FieldList } from '@syncfusion/ej2-react-pivotview';
import '@syncfusion/ej2-react-pivotview/styles/material.css';

const pivotData = [
  { Country: 'USA', Product: 'Laptops', Sales: 5000, Year: 2020 },
  { Country: 'USA', Product: 'Mobiles', Sales: 3000, Year: 2020 },
  { Country: 'Canada', Product: 'Laptops', Sales: 2500, Year: 2020 },
  { Country: 'Canada', Product: 'Mobiles', Sales: 1500, Year: 2020 }
];

function cellTemplate(props: any): JSX.Element {
  return (
    <span style={{ fontWeight: 'bold', color: '#333' }}>
      {props.cellInfo?.value}
    </span>
  );
}

function App() {
  const dataSourceSettings = {
    dataSource: pivotData,
    rows: [{ name: 'Country' }],
    columns: [{ name: 'Product' }],
    values: [{ name: 'Sales', caption: 'Total Sales' }],
    showGrandTotals: true
  };

  return (
    <PivotViewComponent
      id="pivotview"
      dataSourceSettings={dataSourceSettings}
      cellTemplate={cellTemplate}
      showGroupingBar={true}
      showFieldList={true}
      height={350}
    >
      <Inject services={[GroupingBar, FieldList]} />
    </PivotViewComponent>
  );
}

export default App;

typescript

import { PivotViewComponent, Inject, GroupingBar, FieldList } from '@syncfusion/ej2-react-pivotview';
import '@syncfusion/ej2-react-pivotview/styles/material.css';

const pivotData = [
  { Country: 'USA', Product: 'Laptops', Sales: 5000, Year: 2020 },
  { Country: 'USA', Product: 'Mobiles', Sales: 3000, Year: 2020 },
  { Country: 'Canada', Product: 'Laptops', Sales: 2500, Year: 2020 },
  { Country: 'Canada', Product: 'Mobiles', Sales: 1500, Year: 2020 }
];

function cellTemplate(props: any): JSX.Element {
  return (
    <span style={{ fontWeight: 'bold', color: '#333' }}>
      {props.cellInfo?.value}
    </span>
  );
}

function App() {
  const dataSourceSettings = {
    dataSource: pivotData,
    rows: [{ name: 'Country' }],
    columns: [{ name: 'Product' }],
    values: [{ name: 'Sales', caption: 'Total Sales' }],
    showGrandTotals: true
  };

  return (
    <PivotViewComponent
      id="pivotview"
      dataSourceSettings={dataSourceSettings}
      cellTemplate={cellTemplate}
      showGroupingBar={true}
      showFieldList={true}
      height={350}
    >
      <Inject services={[GroupingBar, FieldList]} />
    </PivotViewComponent>
  );
}

export default App;

Common Patterns

常见模式

Pattern 1: Basic Pivot Table with Row and Column Fields

模式1：包含行和列字段的基础数据透视表

typescript

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }, { name: 'Region' }],
  columns: [{ name: 'Year' }, { name: 'Quarter' }],
  values: [{ name: 'Sales', caption: 'Total Sales' }]
};

typescript

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }, { name: 'Region' }],
  columns: [{ name: 'Year' }, { name: 'Quarter' }],
  values: [{ name: 'Sales', caption: 'Total Sales' }]
};

Pattern 2: Adding Filters and Aggregation

模式2：添加筛选与聚合

typescript

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [
    { name: 'Sales', type: 'Sum' },
    { name: 'Quantity', type: 'Avg' }
  ],
  filters: [{ name: 'Year' }]
};

typescript

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [
    { name: 'Sales', type: 'Sum' },
    { name: 'Quantity', type: 'Avg' }
  ],
  filters: [{ name: 'Year' }]
};

Pattern 3: Calculated Fields

模式3：计算字段

typescript

import { PivotViewComponent, Inject, CalculatedField, FieldList } from '@syncfusion/ej2-react-pivotview';

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [
    { name: 'Sold', caption: 'Units Sold' },
    { name: 'Amount', caption: 'Amount' },
    { name: 'Total', caption: 'Total', type: 'CalculatedField' }  // ← Must add to values
  ],
  calculatedFieldSettings: [
    {
      name: 'Total',
      formula: '"Sum(Amount)"+"Sum(Sold)"'  // ← Formula with aggregation functions
    }
  ]
};

typescript

import { PivotViewComponent, Inject, CalculatedField, FieldList } from '@syncfusion/ej2-react-pivotview';

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [
    { name: 'Sold', caption: 'Units Sold' },
    { name: 'Amount', caption: 'Amount' },
    { name: 'Total', caption: 'Total', type: 'CalculatedField' }  // ← 必须添加到值字段中
  ],
  calculatedFieldSettings: [
    {
      name: 'Total',
      formula: '"Sum(Amount)"+"Sum(Sold)"'  // ← 包含聚合函数的公式
    }
  ]
};

Pattern 4: Cell Template with Conditional Formatting

模式4：带条件格式的单元格模板

typescript

function cellTemplate(props: any): JSX.Element {
  const value = props.cellInfo?.value;
  const isTotal = props.cellInfo?.isGrandTotal || props.cellInfo?.isDeserialized;
  
  const getStyle = () => {
    const numValue = parseFloat(value);
    if (numValue > 4000) return { color: '#4CAF50', fontWeight: 'bold' }; // Green for high values
    if (numValue < 1000) return { color: '#f44336', fontWeight: 'bold' }; // Red for low values
    return { color: '#333' };
  };

  return (
    <span style={getStyle()}>
      {isTotal ? <strong>{value}</strong> : value}
    </span>
  );
}

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [{ name: 'Sales' }]
};

typescript

function cellTemplate(props: any): JSX.Element {
  const value = props.cellInfo?.value;
  const isTotal = props.cellInfo?.isGrandTotal || props.cellInfo?.isDeserialized;
  
  const getStyle = () => {
    const numValue = parseFloat(value);
    if (numValue > 4000) return { color: '#4CAF50', fontWeight: 'bold' }; // 高值显示绿色
    if (numValue < 1000) return { color: '#f44336', fontWeight: 'bold' }; // 低值显示红色
    return { color: '#333' };
  };

  return (
    <span style={getStyle()}>
      {isTotal ? <strong>{value}</strong> : value}
    </span>
  );
}

const dataSourceSettings = {
  dataSource: data,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [{ name: 'Sales' }]
};

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

属性	类型	描述
`dataSourceSettings`	object	配置数据源、字段、行、列、值、筛选器、聚合、计算字段和格式设置
`cellTemplate`	function	自定义单元格渲染函数，返回值单元格的JSX.Element
`gridSettings`	GridSettings	配置行高、列宽、文本换行、调整大小、重排
`height`	string/number	组件高度（像素或百分比）
`width`	string/number	组件宽度（像素或百分比）
`showGroupingBar`	boolean	显示/隐藏用于拖放字段管理的分组栏
`showFieldList`	boolean	显示/隐藏字段列表面板（内置或侧边面板）
`allowCalculatedField`	boolean	允许通过字段列表对话框创建和编辑计算字段
`allowExcelExport`	boolean	启用Excel导出功能
`allowPdfExport`	boolean	启用PDF导出功能
`allowMemberFilter`	boolean	允许在字段列表中进行成员筛选（选择/取消选择成员）
`allowLabelFilter`	boolean	启用标签筛选（按文本/标签值筛选）
`allowValueFilter`	boolean	启用值筛选（按聚合值筛选）
`allowDrillThrough`	boolean	启用穿透功能以查看透视数据
`allowConditionalFormatting`	boolean	启用基于值的单元格条件格式
`allowDeferLayoutUpdate`	boolean	在字段列表中批量处理字段操作，仅点击“应用”后生效
`enableVirtualization`	boolean	启用虚拟滚动以处理大数据集
`enablePaging`	boolean	启用行/列分布的分页功能
`showToolbar`	boolean	显示/隐藏带有预设操作的工具栏
`pageSettings`	PageSettings	配置分页的行和列页面大小

GridSettings Configuration

GridSettings配置

```
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)

```
rowHeight
```
: 指定行高（像素）
```
columnWidth
```
: 设置默认列宽
```
allowResizing
```
: 启用列/行调整大小
```
allowReordering
```
: 允许拖放字段重排
```
allowTextWrap
```
: 启用单元格文本换行
```
columnRender
```
: 列自定义的事件处理程序（如文本对齐）

syncfusion-react-pivot-table

Original

Translation

Implementing PivotView in React

在React中实现PivotView

When to Use This Skill

何时使用此技能

Navigation Guide

导航指南

Setup

环境搭建

Data Management

数据管理

Visualization & Interaction

可视化与交互

Data Organization & Display

数据组织与展示

Navigation & Analysis

导航与分析

Export & Output

导出与输出

Advanced & Performance

高级与性能

Quick Start

快速开始

Common Patterns

常见模式

Pattern 1: Basic Pivot Table with Row and Column Fields

模式1：包含行和列字段的基础数据透视表

Pattern 2: Adding Filters and Aggregation

模式2：添加筛选与聚合

Pattern 3: Calculated Fields

模式3：计算字段

Pattern 4: Cell Template with Conditional Formatting

模式4：带条件格式的单元格模板

Key Props & Configuration

核心属性与配置

GridSettings Configuration

GridSettings配置

Related Skills

相关技能