| name | devexpress-blazor-pivot-table |
| description | Build and configure the DevExpress Blazor Pivot Table (DxPivotTable) — an interactive pivot grid / cross-tab analysis component for Blazor. Use for pivot-style row/column aggregation (sum/count/avg/min/max), field layout (area/area index), date grouping (year/quarter/month), interactive filtering, and building analytical dashboards. Also use for DxPivotTable, pivot grid, pivot table, cross-tab, OLAP-style analysis, and pivot feature comparisons or migration scenarios. |
| compatibility | Requires .NET 8, 9, or 10. NuGet packages DevExpress.Blazor.PivotTable and DevExpress.PivotGrid.Core are available on NuGet.org. @using DevExpress.Blazor.PivotTable required in _Imports.razor. A valid DevExpress license is required. Requires interactive render mode. |
| metadata | {"author":"DevExpress","version":"26.1","source-commit":"8493730c9e9a47a009fc307a37c307e157663819"} |
DevExpress Blazor Pivot Table
DxPivotTable is an interactive cross-tabulation component for Blazor that aggregates data into row, column, data, and filter areas. It is designed for data analysis scenarios — sales by region and period, expenses by category, inventory by supplier.
When to Use This Skill
- Display data in cross-tabulation (pivot) form with rows and columns
- Aggregate values with Sum, Count, Average, Min, Max
- Group dates by Year, Quarter, or Month
- Enable end-users to drag fields between areas interactively
- Filter data across one or more dimensions
Prerequisites & Installation
NuGet Packages (two packages required)
| Package | Purpose |
|---|
DevExpress.Blazor.PivotTable | The Blazor PivotTable component |
DevExpress.PivotGrid.Core | Core pivot engine (required dependency) |
dotnet add package DevExpress.Blazor.PivotTable
dotnet add package DevExpress.PivotGrid.Core
Setup
- Register in
Program.cs:
builder.Services.AddDevExpressBlazor();
v26.1 note: DevExpress.Blazor no longer includes options.BootstrapVersion or DevExpress.Blazor.BootstrapVersion. Do not generate either API.
- Apply a theme and add client scripts in
App.razor inside <head>:
@using DevExpress.Blazor
@DxResourceManager.RegisterTheme(Themes.Fluent)
@DxResourceManager.RegisterScripts()
- Add both namespaces to
_Imports.razor:
@using DevExpress.Blazor
@using DevExpress.Blazor.PivotTable
Important: @using DevExpress.Blazor.PivotTable is required in addition to @using DevExpress.Blazor. Without it, DxPivotTable and DxPivotTableField are not resolved.
Before You Start — Ask the Developer
- Data source: What is the type of data being pivoted? (list of sales records, orders, etc.)
- Render mode: Are you using
InteractiveServer, InteractiveWebAssembly, or InteractiveAuto?
- Row and Column axes: Which fields should appear on rows? Which on columns?
- Aggregation: What values should be summed/averaged? (e.g., Revenue, Quantity)
- Date grouping: Should dates be grouped by Year, Quarter, or Month?
Component Overview
DxPivotTable provides:
- Data Binding (
Data): Binds to IEnumerable<T> or IQueryable<T>
- Field Configuration (
DxPivotTableField inside <Fields>): Defines which fields appear in which area, their order, aggregation type, and grouping interval
- Areas (
PivotTableArea): Row, Column, Data, Filter
- Date Grouping (
PivotTableGroupInterval): DateYear, DateQuarter, DateMonth, DateDay, DateHour
- Aggregation (
PivotTableSummaryType): Sum, Count, Average, Min, Max
- Interactive Field List: Users can drag fields between areas at runtime
- Filtering (
PivotTableArea.Filter): Filter fields display a filter-menu button in their header; users select/deselect values to filter table data; FilterHeaderAreaDisplayMode controls the filter header strip
- Totals & Grand Totals (
ShowRowTotals, ShowRowGrandTotals, ShowColumnTotals, ShowColumnGrandTotals): Control row/column subtotals and grand totals visibility
Core Entry Point (Razor)
@rendermode InteractiveServer
@using DevExpress.Blazor.PivotTable
<DxPivotTable Data="@SalesData">
<Fields>
<DxPivotTableField Field="@nameof(Sale.Country)"
Area="PivotTableArea.Row" />
<DxPivotTableField Field="@nameof(Sale.OrderDate)"
Area="PivotTableArea.Column"
GroupInterval="PivotTableGroupInterval.DateYear"
Caption="Year" />
<DxPivotTableField Field="@nameof(Sale.Amount)"
Area="PivotTableArea.Data"
SummaryType="PivotTableSummaryType.Sum"
Caption="Total Sales" />
</Fields>
</DxPivotTable>
Documentation & Navigation Guide
Getting Started
📄 references/getting-started.md
When you need to:
- Install the two required NuGet packages
- Configure namespaces
- Display your first pivot table
Data Binding
📄 references/data-binding.md
When you need to:
- Bind to in-memory collections or
IQueryable<T>
- Understand supported data types
- Design a data model for pivot analysis
Fields & Areas
📄 references/fields-and-areas.md
When you need to:
- Configure
DxPivotTableField properties
- Use
PivotTableArea (Row/Column/Data/Filter)
- Group dates by
PivotTableGroupInterval
- Choose
PivotTableSummaryType (Sum/Count/Average/Min/Max)
- Control field order with
AreaIndex
Examples
💻 examples/quickstart.razor — In-memory pivot with multi-level rows/columns, date grouping, multiple data fields, and a filter
💻 examples/ef-core-binding.razor — EF Core IQueryable binding with IDbContextFactory for large datasets
Quick Start Example
@page "/pivot-demo"
@rendermode InteractiveServer
@using DevExpress.Blazor.PivotTable
<DxPivotTable Data="@Sales">
<Fields>
<DxPivotTableField Field="@nameof(Sale.Country)"
Area="PivotTableArea.Row"
AreaIndex="0"
Caption="Country" />
<DxPivotTableField Field="@nameof(Sale.Category)"
Area="PivotTableArea.Row"
AreaIndex="1"
Caption="Category" />
<DxPivotTableField Field="@nameof(Sale.OrderDate)"
Area="PivotTableArea.Column"
AreaIndex="0"
GroupInterval="PivotTableGroupInterval.DateYear"
Caption="Year" />
<DxPivotTableField Field="@nameof(Sale.OrderDate)"
Area="PivotTableArea.Column"
AreaIndex="1"
GroupInterval="PivotTableGroupInterval.DateQuarter"
Caption="Quarter" />
<DxPivotTableField Field="@nameof(Sale.Amount)"
Area="PivotTableArea.Data"
SummaryType="PivotTableSummaryType.Sum"
Caption="Total Sales ($)" />
<DxPivotTableField Field="@nameof(Sale.Region)"
Area="PivotTableArea.Filter"
Caption="Region" />
</Fields>
</DxPivotTable>
@code {
List<Sale> Sales { get; set; }
protected override void OnInitialized() {
Sales = new List<Sale> {
new Sale { Country = "USA", Region = "West", Category = "Electronics", OrderDate = new DateTime(2024, 1, 10), Amount = 1500 },
new Sale { Country = "USA", Region = "East", Category = "Clothing", OrderDate = new DateTime(2024, 3, 15), Amount = 800 },
new Sale { Country = "UK", Region = "North", Category = "Electronics", OrderDate = new DateTime(2024, 2, 20), Amount = 1200 },
new Sale { Country = "UK", Region = "South", Category = "Clothing", OrderDate = new DateTime(2024, 4, 5), Amount = 600 },
new Sale { Country = "Germany", Region = "Central", Category = "Electronics", OrderDate = new DateTime(2024, 5, 12), Amount = 2100 },
};
}
class Sale {
public string Country { get; set; }
public string Region { get; set; }
public string Category { get; set; }
public DateTime OrderDate { get; set; }
public decimal Amount { get; set; }
}
}
Key Properties
DxPivotTable
| Property | Type | Description |
|---|
Data | object | Data source (IEnumerable<T> or IQueryable<T>) |
ShowFieldList | bool | Show the interactive field list panel |
Height | string | Component height ("600px") |
Width | string | Component width |
DxPivotTableField
| Property | Type | Description |
|---|
Field | string | Data field name (use nameof() for type safety) |
Area | PivotTableArea | Placement area: Row, Column, Data, Filter |
AreaIndex | int | Order within the area (0-based) |
Caption | string | Label shown in the field list and headers |
SummaryType | PivotTableSummaryType | Aggregation (Data area only) |
GroupInterval | PivotTableGroupInterval | Date grouping (Column/Row date fields) |
SortOrder | PivotTableSortOrder | Ascending or Descending |
Visible | bool | Show or hide the field |
Troubleshooting
| Symptom | Cause | Fix |
|---|
DxPivotTable not found | Missing @using DevExpress.Blazor.PivotTable | Add to _Imports.razor |
| Pivot shows no data | Field property mismatch | Use nameof() to ensure the field name matches exactly |
| Dates not grouped | GroupInterval not set | Add GroupInterval="PivotTableGroupInterval.DateYear" |
| Values not aggregated | Area set to Row/Column instead of Data | Use Area="PivotTableArea.Data" for value fields |
| Component is not interactive | Static render mode | Add @rendermode InteractiveServer to the page |
"Unhandled exception on the current circuit" with no detail | CircuitOptions.DetailedErrors not set | Add builder.Services.Configure<CircuitOptions>(o => o.DetailedErrors = true); in Program.cs (development only) |
"Component parameter 'ValueChanged' is used two or more times" compile error | @bind-Value and ValueChanged used together | Use @bind-Value="@val" for two-way binding, or Value="@val" ValueChanged="@handler" — never both simultaneously |
dx-blazor.js not found (404) behind a reverse proxy | Reverse proxy strips the app base path | Add app.UsePathBase("/subpath") before app.MapBlazorHub(), or set <base href="/subpath/" /> in App.razor |
Static assets return 404 (dx-blazor.css, dx-blazor.js) | UseStaticWebAssets() not called | Add app.UseStaticWebAssets(); in Program.cs before app.UseStaticFiles() |
"Could not find 'X' in 'window.DxBlazor'" JavaScript error | Stale browser-cached JS from an older DevExpress version | Hard-refresh the browser (Ctrl+Shift+R), clear site data, or verify all DevExpress NuGet packages are the same version |
"Cannot pass the parameter 'X' to component 'Y' with rendermode" | Non-serializable parameter passed across a render mode boundary | Move the component to a child .razor file with its own @rendermode directive; pass only serializable parameters |
Constraints & Rules
- Never invent API: If a property, method, event, or feature is not documented in this skill or its references, do not assume it exists. When asked about an unfamiliar API, first try to verify it using the DevExpress documentation MCP (
devexpress_docs_search) or the local apidoc/ folder. Only after checking: if confirmed, use the API; if not found, explicitly state that it does not appear to be part of the DxPivotTable API. Do not warn that a feature "may have been introduced in a recent version" as a way to justify inventing it.
- Two NuGet packages: Both
DevExpress.Blazor.PivotTable and DevExpress.PivotGrid.Core are required.
- Namespace:
@using DevExpress.Blazor.PivotTable must be in _Imports.razor or the component file.
- Render mode: Interactive render mode is required for pivot area changes, filtering, and expansion.
- AreaIndex: When multiple fields share an area, use
AreaIndex to control their order.
- nameof(): Use
nameof(MyClass.Property) for Field to avoid spelling errors.
- Build verification: Run
dotnet build after adding packages and imports.
Using DevExpress Documentation MCP
If devexpress_docs_search and devexpress_docs_get_content are available:
devexpress_docs_search(technology="Blazor", query="PivotTable data binding IQueryable")devexpress_docs_get_content(url="https://docs.devexpress.com/Blazor/...")
Use MCP for: OLAP binding, server-mode configuration, custom summaries, export to PDF/Excel, and field list customization.
