devexpress/agent-skills/devexpress-blazor-pivot-table

Name: devexpress-blazor-pivot-table
Author: devexpress

Claude Code and agent skill by devexpress/agent-skills

Trust tier 2

community

LLM review pending

By devexpress
Coding
devexpress/agent-skills
Plugin dx-blazor
plugins/dx-blazor/skills/devexpress-blazor-pivot-table/SKILL.md
Updated 30 Oct 2026
Version 1.0.12 versions recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

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.

Install

npx vskill@latest install devexpress/agent-skills/devexpress-blazor-pivot-table

SKILL.md

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)

bash

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

Setup

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

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

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

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

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)

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

razor

@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

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingplugins/dx-blazor/skills/devexpress-blazor-pivot-table/SKILL.md

Popularity

Repository stars: 52
Repository forks: 8
7-day trend score: 20

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/devexpress/agent-skills/devexpress-blazor-pivot-table/badge)](https://verified-skill.com/skills/devexpress/agent-skills/devexpress-blazor-pivot-table)

Something wrong with this skill or its page? Tell us.