syncfusion-blazor-pivot-table

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor Pivot Table

Syncfusion Blazor 数据透视表

The Syncfusion Blazor Pivot Table (

SfPivotView

) is a powerful multi-dimensional data analysis component that enables users to organize, summarize, and visualize data across row, column, value, and filter axes — similar to Excel pivot tables. It supports relational data (JSON/IEnumerable) and OLAP cubes, with interactive runtime controls including a Field List and Grouping Bar.

⚠️ 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 Blazor 数据透视表（

SfPivotView

）是一个功能强大的多维数据分析组件，允许用户在行、列、值和筛选轴上组织、汇总和可视化数据——类似于Excel数据透视表。它支持关系型数据（JSON/IEnumerable）和OLAP立方体，提供包括字段列表和分组栏在内的交互式运行时控件。

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

When to Use This Skill

适用场景

Implementing
```
SfPivotView
```
in a Blazor WASM, Server, or MAUI app
Configuring
```
PivotViewDataSourceSettings
```
with JSON, remote, or OLAP data
Using Field List, Grouping Bar, aggregation, or calculated fields
Applying filtering, sorting, or grouping to pivot data
Enabling editing, export (Excel/PDF), or toolbar in the Pivot Table
Rendering a Pivot Chart alongside or instead of the grid
Optimizing pivot performance with virtual scrolling, paging, or server-side engine
Applying number/conditional formatting, drill-down, drill-through
Persisting pivot state or handling pivot events
Building AI-powered Smart Pivot features

在Blazor WASM、Server或MAUI应用中实现
```
SfPivotView
```
使用JSON、远程数据或OLAP数据配置
```
PivotViewDataSourceSettings
```
使用字段列表、分组栏、数据聚合或计算字段
对透视数据应用筛选、排序或分组
在数据透视表中启用编辑、导出（Excel/PDF）或工具栏
渲染数据透视图表（可单独显示图表或同时显示表格）
通过虚拟滚动、分页或服务器端引擎优化数据透视表性能
应用数字/条件格式、下钻、穿透钻取
持久化数据透视表状态或处理数据透视表事件
构建AI驱动的智能数据透视功能

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Install NuGet packages, register service, add CSS/JS
Initialize
```
SfPivotView
```
in a Blazor WASM, Server, or MAUI app
Assign sample data and configure row/column/value/filter axes
Minimal working example

📄 阅读： references/getting-started.md

安装NuGet包、注册服务、添加CSS/JS
在Blazor WASM、Server或MAUI应用中初始化
```
SfPivotView
```
分配示例数据并配置行/列/值/筛选轴
最简可运行示例

Data Binding

数据绑定

📄 Read: references/data-binding.md

Bind local JSON/IEnumerable data

Use

SfDataManager

with

JsonAdaptor

WebApiAdaptor

ODataV4Adaptor

Remote data binding patterns and lazy loading

📄 阅读： references/data-binding.md

绑定本地JSON/IEnumerable数据

使用

SfDataManager

搭配

JsonAdaptor

、

WebApiAdaptor

、

ODataV4Adaptor

远程数据绑定模式和懒加载

OLAP Data Source

OLAP数据源

📄 Read: references/olap.md

Connect to Microsoft SQL Server Analysis Services (SSAS) OLAP cubes
Configure OLAP cube elements: hierarchies, measures, dimensions, named sets
Calculated fields and MDX expressions
Authentication and role-based access
OLAP-specific features: field list, grouping bar, virtual scrolling

📄 阅读： references/olap.md

连接到Microsoft SQL Server Analysis Services (SSAS) OLAP立方体
配置OLAP立方体元素：层次结构、度量值、维度、命名集
计算字段和MDX表达式
身份验证和基于角色的访问
OLAP专属功能：字段列表、分组栏、虚拟滚动

Connecting to Databases

连接数据库

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

Connect to SQL Server, MySQL, PostgreSQL, MongoDB, Oracle, Snowflake, Elasticsearch
Server-side data service patterns for Blazor
Connection string setup and adaptor configuration

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

连接到SQL Server、MySQL、PostgreSQL、MongoDB、Oracle、Snowflake、Elasticsearch
Blazor的服务器端数据服务模式
连接字符串设置和适配器配置

Field List

字段列表

📄 Read: references/field-list.md

Enable built-in (popup) or stand-alone field list
Customizing fields: captions, visibility, drag behavior
Defer layout update for batch field changes

📄 阅读： references/field-list.md

启用内置（弹窗式）或独立式字段列表
自定义字段：标题、可见性、拖拽行为
延迟布局更新以支持批量字段变更

Grouping Bar

分组栏

📄 Read: references/grouping-bar.md

Enable
```
ShowGroupingBar
```
for drag-and-drop field management
Filter, sort, and remove fields at runtime
Customize grouping bar appearance and behavior

📄 阅读： references/grouping-bar.md

启用
```
ShowGroupingBar
```
以支持拖拽式字段管理
在运行时筛选、排序和删除字段
自定义分组栏的外观和行为

Aggregation

数据聚合

📄 Read: references/aggregation.md

All
```
SummaryTypes
```
(Sum, Count, Avg, Min, Max, % of total, etc.)
Set aggregation per value field via
```
PivotViewValue.Type
```

DifferenceFrom

PercentageOfDifferenceFrom

RunningTotals

📄 阅读： references/aggregation.md

所有
```
SummaryTypes
```
（求和、计数、平均值、最小值、最大值、占总计百分比等）
通过
```
PivotViewValue.Type
```
为每个值字段设置聚合方式

DifferenceFrom

、

PercentageOfDifferenceFrom

、

RunningTotals

Calculated Fields

计算字段

📄 Read: references/calculated-field.md

Create formula-based custom fields via UI dialog or
```
PivotViewCalculatedFieldSettings
```
Display calculated field in value axis
Open dialog programmatically

📄 阅读： references/calculated-field.md

通过UI对话框或
```
PivotViewCalculatedFieldSettings
```
创建基于公式的自定义字段
在值轴中显示计算字段
以编程方式打开对话框

Filtering

筛选

📄 Read: references/filtering.md

Member filtering (include/exclude), label filtering, value filtering
Programmatic filter setup with
```
PivotViewFilterSettings
```
Date filters and OLAP filtering

📄 阅读： references/filtering.md

成员筛选（包含/排除）、标签筛选、值筛选
使用
```
PivotViewFilterSettings
```
以编程方式设置筛选
日期筛选和OLAP筛选

Sorting

排序

📄 Read: references/sorting.md

Enable
```
EnableSorting
```
for member sort (ascending/descending)
Programmatic sort with
```
PivotViewSortSettings
```
Value sorting across column headers

📄 阅读： references/sorting.md

启用
```
EnableSorting
```
以支持成员排序（升序/降序）
使用
```
PivotViewSortSettings
```
以编程方式设置排序
跨列标题的值排序

Grouping

分组

📄 Read: references/grouping.md

Number grouping (ranges), date grouping (year/quarter/month/day), custom grouping
Enable
```
AllowGrouping
```
and right-click UI
Programmatic grouping configuration

📄 阅读： references/grouping.md

数字分组（范围）、日期分组（年/季度/月/日）、自定义分组
启用
```
AllowGrouping
```
和右键菜单UI
以编程方式配置分组

Drill Down & Drill Through

下钻与穿透钻取

📄 Read: references/drill-down-and-through.md

Expand/collapse member hierarchies
```
ExpandAll
```
to show all levels on load
Drill-through popup for viewing raw data behind a value cell

📄 阅读： references/drill-down-and-through.md

展开/折叠成员层次结构
```
ExpandAll
```
用于在加载时显示所有层级
穿透钻取弹窗用于查看值单元格背后的原始数据

Editing

编辑

📄 Read: references/editing.md

Enable
```
PivotViewCellEditSettings
```
for CRUD on raw data
Edit modes: Normal, Dialog, Batch, Command Columns
Inline editing; add/update/delete with confirmation dialogs

📄 阅读： references/editing.md

启用
```
PivotViewCellEditSettings
```
以对原始数据执行CRUD操作
编辑模式：普通、对话框、批量、命令列
内联编辑；带确认对话框的添加/更新/删除操作

Formatting

格式设置

📄 Read: references/formatting.md

Number formatting (N, C, P, custom) via
```
PivotViewFormatSettings
```
Conditional formatting with
```
PivotViewConditionalFormatSettings
```
Apply formatting via toolbar at runtime

📄 阅读： references/formatting.md

通过
```
PivotViewFormatSettings
```
设置数字格式（N、C、P、自定义）
使用
```
PivotViewConditionalFormatSettings
```
设置条件格式
在运行时通过工具栏应用格式

Layout & Display

布局与显示

📄 Read: references/layout-and-display.md

Component Width/Height, classic layout
Row/column customization (frozen headers, column width, auto-fit)
Show/hide grand totals and sub-totals
Hyper-links in cells, tooltips

📄 阅读： references/layout-and-display.md

组件宽/高、经典布局
行/列自定义（冻结表头、列宽、自动适配）
显示/隐藏总计和小计
单元格超链接、工具提示

Toolbar

工具栏

📄 Read: references/toolbar.md

Enable
```
ShowToolbar
```
with built-in items (Grid, Chart, Export, Formatting, Field List)
Custom toolbar items and event handling
Report management (save, load, rename, delete)

📄 阅读： references/toolbar.md

启用
```
ShowToolbar
```
并配置内置项（表格、图表、导出、格式设置、字段列表）
自定义工具栏项和事件处理
报表管理（保存、加载、重命名、删除）

Export (Excel & PDF)

导出（Excel和PDF）

📄 Read: references/export.md

Excel export:
```
ExportToExcelAsync
```
, styling, custom file name
PDF export:
```
ExportToPdfAsync
```
, page settings, themes
Export via toolbar or programmatically

📄 阅读： references/export.md

Excel导出：
```
ExportToExcelAsync
```
、样式设置、自定义文件名
PDF导出：
```
ExportToPdfAsync
```
、页面设置、主题
通过工具栏或编程方式导出

Performance Optimization

性能优化

📄 Read: references/performance.md

Virtual scrolling (
```
EnableVirtualization
```
) for large datasets
Paging (
```
PivotViewPageSettings
```
) as an alternative to virtualization
Data compression, defer layout update
WebAssembly-specific optimizations
Server-side pivot engine for offloading computation

📄 阅读： references/performance.md

针对大型数据集的虚拟滚动（
```
EnableVirtualization
```
）
分页（
```
PivotViewPageSettings
```
）作为虚拟滚动的替代方案
数据压缩、延迟布局更新
WebAssembly专属优化
服务器端数据透视引擎以卸载计算任务

Pivot Chart

数据透视图

📄 Read: references/pivot-chart.md

Render chart-only, grid-only, or both (
```
PivotViewDisplayOption
```
)
15+ chart types via
```
PivotChartSettings
```
Drill-down in chart, multiple axes, export chart

📄 阅读： references/pivot-chart.md

仅渲染图表、仅渲染表格或同时渲染两者（
```
PivotViewDisplayOption
```
）
通过
```
PivotChartSettings
```
支持15+种图表类型
图表下钻、多轴、图表导出

State Persistence & Events

状态持久化与事件

📄 Read: references/state-and-events.md

```
EnablePersistence
```
for automatic browser local storage
Save/load layout programmatically (
```
GetPersistDataAsync
```
/
```
LoadPersistDataAsync
```
)

Key events reference:

BeforeColumnsRender

CellClick

DrillThrough

OnLoad

📄 阅读： references/state-and-events.md

```
EnablePersistence
```
用于自动保存到浏览器本地存储
以编程方式保存/加载布局（
```
GetPersistDataAsync
```
/
```
LoadPersistDataAsync
```
）

关键事件参考：

BeforeColumnsRender

、

CellClick

、

DrillThrough

、

OnLoad

Smart Pivot (AI)

智能数据透视（AI）

📄 Read: references/smart-pivot.md

```
Syncfusion.Blazor.AI
```
NuGet for AI-powered features
Smart Data Aggregation, Predictive Modeling, Adaptive Filtering
Configure OpenAI, Azure OpenAI, or Ollama

📄 阅读： references/smart-pivot.md

```
Syncfusion.Blazor.AI
```
NuGet包用于AI驱动功能
智能数据聚合、预测建模、自适应筛选
配置OpenAI、Azure OpenAI或Ollama

Quick Start Example

快速入门示例

razor

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" Height="350">
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting="true">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping="true"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</SfPivotView>

@code {
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        data = ProductDetails.GetProductData().ToList();
    }
}

razor

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" Height="350">
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting="true">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping="true"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</SfPivotView>

@code {
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        data = ProductDetails.GetProductData().ToList();
    }
}

Common Patterns

常见模式

Enable Field List + Grouping Bar

启用字段列表 + 分组栏

razor

<SfPivotView TValue="ProductDetails" ShowFieldList="true" ShowGroupingBar="true">

razor

<SfPivotView TValue="ProductDetails" ShowFieldList="true" ShowGroupingBar="true">

Enable Toolbar with Export

启用带导出功能的工具栏

razor

<SfPivotView TValue="ProductDetails" ShowToolbar="true"
             Toolbar="@toolbar" AllowExcelExport="true" AllowPdfExport="true">
@code {
    public List<ToolbarItems> toolbar = new List<ToolbarItems> {
        ToolbarItems.Grid, ToolbarItems.Chart, ToolbarItems.Export,
        ToolbarItems.SubTotal, ToolbarItems.GrandTotal, ToolbarItems.FieldList
    };
}

razor

<SfPivotView TValue="ProductDetails" ShowToolbar="true"
             Toolbar="@toolbar" AllowExcelExport="true" AllowPdfExport="true">
@code {
    public List<ToolbarItems> toolbar = new List<ToolbarItems> {
        ToolbarItems.Grid, ToolbarItems.Chart, ToolbarItems.Export,
        ToolbarItems.SubTotal, ToolbarItems.GrandTotal, ToolbarItems.FieldList
    };
}

Virtual Scrolling for Large Data

针对大数据的虚拟滚动

razor

<SfPivotView TValue="MyData" EnableVirtualization="true" ShowTooltip="false"
             Width="100%" Height="500">

razor

<SfPivotView TValue="MyData" EnableVirtualization="true" ShowTooltip="false"
             Width="100%" Height="500">

Show Pivot Chart Only

仅显示数据透视图

razor

<SfPivotView TValue="ProductDetails">
    <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>
    <PivotChartSettings Title="Sales Analysis">
        <PivotChartSeries Type=ChartSeriesType.Column></PivotChartSeries>
    </PivotChartSettings>
</SfPivotView>

razor

<SfPivotView TValue="ProductDetails">
    <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>
    <PivotChartSettings Title="Sales Analysis">
        <PivotChartSeries Type=ChartSeriesType.Column></PivotChartSeries>
    </PivotChartSettings>
</SfPivotView>

Key Properties

关键属性

Property	Type	Purpose
`TValue`	Generic	Model type for data rows
`Height` / `Width`	string/int	Component dimensions
`ShowFieldList`	bool	Enable popup field list
`ShowGroupingBar`	bool	Enable grouping bar
`ShowToolbar`	bool	Enable toolbar
`EnableVirtualization`	bool	Virtual scrolling
`AllowGrouping`	bool	Enable date/number grouping
`AllowCalculatedField`	bool	Enable calculated fields
`AllowExcelExport`	bool	Enable Excel export
`AllowPdfExport`	bool	Enable PDF export
`AllowEditing`	bool (in `PivotViewCellEditSettings` )	Enable CRUD editing
`EnablePersistence`	bool	Save state to localStorage

属性	类型	用途
`TValue`	泛型	数据行的模型类型
`Height` / `Width`	string/int	组件尺寸
`ShowFieldList`	bool	启用弹窗式字段列表
`ShowGroupingBar`	bool	启用分组栏
`ShowToolbar`	bool	启用工具栏
`EnableVirtualization`	bool	虚拟滚动
`AllowGrouping`	bool	启用日期/数字分组
`AllowCalculatedField`	bool	启用计算字段
`AllowExcelExport`	bool	启用Excel导出
`AllowPdfExport`	bool	启用PDF导出
`AllowEditing`	bool（在 `PivotViewCellEditSettings` 中）	启用CRUD编辑
`EnablePersistence`	bool	将状态保存到localStorage