Devexpress Blazor Pivot Table

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

# Install from NuGet.org:
dotnet add package DevExpress.Blazor.PivotTable
dotnet add package DevExpress.PivotGrid.Core

Setup

1. Register in Program.cs:

``csharp builder.Services.AddDevExpressBlazor(); ` > **v26.1 note**: DevExpress.Blazor no longer includes options.BootstrapVersion or DevExpress.Blazor.BootstrapVersion`. Do not generate either API.

1. Apply a theme and add client scripts in App.razor inside ``:

``razor @using DevExpress.Blazor @DxResourceManager.RegisterTheme(Themes.Fluent) @DxResourceManager.RegisterScripts() ``

1. Add both namespaces to _Imports.razor:

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

1. Data source: What is the type of data being pivoted? (list of sales records, orders, etc.)
2. Render mode: Are you using InteractiveServer, InteractiveWebAssembly, or InteractiveAuto?
3. Row and Column axes: Which fields should appear on rows? Which on columns?
4. Aggregation: What values should be summed/averaged? (e.g., Revenue, Quantity)
5. Date grouping: Should dates be grouped by Year, Quarter, or Month?

Component Overview

DxPivotTable provides:

• Data Binding (Data): Binds to IEnumerable or IQueryable
• Field Configuration (DxPivotTableField inside ``): 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


    
        
        
        
    

Documentation & Navigation Guide

Getting Started

📄 [references/getting-started.md](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](references/data-binding.md)

When you need to:

• Bind to in-memory collections or IQueryable
• Understand supported data types
• Design a data model for pivot analysis

Fields & Areas

📄 [references/fields-and-areas.md](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](examples/quickstart.razor) — In-memory pivot with multi-level rows/columns, date grouping, multiple data fields, and a filter 💻 [examples/ef-core-binding.razor](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


    
        
        
        
        
        
        
    


@code {
    List Sales { get; set; }

    protected override void OnInitialized() {
        Sales = new List {
            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 or IQueryable) | | 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(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 ` 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

1. 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.
2. Two NuGet packages: Both DevExpress.Blazor.PivotTable and DevExpress.PivotGrid.Core are required.
3. Namespace: @using DevExpress.Blazor.PivotTable must be in _Imports.razor or the component file.
4. Render mode: Interactive render mode is required for pivot area changes, filtering, and expansion.
5. AreaIndex: When multiple fields share an area, use AreaIndex to control their order.
6. nameof(): Use nameof(MyClass.Property) for Field to avoid spelling errors.
7. 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:

1. devexpress_docs_search(technology="Blazor", query="PivotTable data binding IQueryable")
2. 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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: DevExpress
• Source: DevExpress/agent-skills
• License: MIT
• Homepage: https://www.devexpress.com

Install and usage instructions live in the source repository linked above.