DxPivotGrid<T> Class

A pivot grid component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll


public class DxPivotGrid<T> :

Type Parameters

Name Description

The data item type.


The DevExpress Pivot Grid for Blazor (<DxPivotGrid>) allows you to display and analyze multi-dimensional data from the underlying data source. Use this component to calculate summaries and totals against specific values and display the results within the pivot table's cells.



Online Demo: Pivot Grid - Overview

Add Pivot Grid to a Project

To add the <DxPivotGrid> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.
  2. Add the <DxPivotGrid>...</DxPivotGrid> markup to your application.
  3. Bind the Pivot Grid to data.
  4. Configure the component (see the sections below).

Bind to Data

Use the Data property to bind <DxPivotGrid> to an IEnumerable<T> or IQueryable<T> data source.


The Pivot Grid operates in bound mode only. Unbound mode is not supported.

@if(GridData == null) {
} else {
    <DxPivotGrid Data="@GridData">
        <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" Area="PivotGridFieldArea.Row"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="@ivotGridFieldArea.Row"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" Area="PivotGridFieldArea.Column" Caption="Year"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Area="PivotGridFieldArea.Column" Caption="Quarter">
            <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>
        <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Count"></DxPivotGridField>
@code { 
    IQueryable<SaleInfo> GridData;

    protected override async Task OnInitializedAsync() {
        GridData = await Sales.Load();


The Pivot Grid fields supply data to <DxPivotGrid> columns, rows, and data cells. The DxPivotGridField class represents a field.

<DxPivotGrid Data="@GridData">
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" Area="PivotGridFieldArea.Column"></DxPivotGridField>

Use the field's Area property to specify the field location: Column Header Area, Row Header Area, or Data Header Area.


  • Column Header Area contains fields that represent grid columns.

    <DxPivotGridField Field="@nameof(SaleInfo.Date)" Area="PivotGridFieldArea.Column"></DxPivotGridField>
  • Row Header Area contains fields that represent grid rows.

    <DxPivotGridField Field="@nameof(SaleInfo.Region)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
  • Data Header Area contain fields that provide data for grid cells.

    <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data"></DxPivotGridField>

To hide field headers, set the ShowFieldHeaders property to false.


Pivot Grid cells display summaries calculated against data fields. The SummaryType property specifies the field's summary type.

<DxPivotGridField Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum"></DxPivotGridField>

The available summary types are:

Summary Type Description
Avg (average) The average of the field values. This type applies to numeric fields only.
Count The total number of field values.
Max (maximum) The largest field value.
Min (minimum) The smallest field value.
Sum The sum of the field values. This type applies to numeric fields only.


DxPivotGrid calculates totals and displays them as separate columns and rows. Totals use the corresponding data field's summary type for calculations.

The Pivot Grid component supports the following totals:

  • Row/column totals display sub-totals calculated for outer row/column fields.
  • Row/column grand totals display summary totals calculated against all the rows/columns. To hide grand totals, set the ShowGrandTotals property to false.


Sort Data

DxPivotGrid data is always sorted by row and column fields. A field header displays a sort order (ascending or descending) for the corresponding field's values. To change the sort order, use the SortOrder property in code or click the field header at runtime.

<DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="@SortOrder.Ascending"></DxPivotGridField>


Group Data

You can group grid data by date/time field values. To specify how field values are grouped, use the GroupInterval property.

<DxPivotGrid Data="@GridData">
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" Caption="Year"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Caption="Quarter">
        <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>

The image below displays DxPivotGrid in two states:

  • The Date field contains original data.
  • The Date field is grouped by years and quarters.


Visualize Data

Do the following to link <DxPivotGrid> with the DxChart<T> component:

  1. Create a method that asynchronously loads data from an IEnumerable<T> data source (Sales.Load() in this example).
  2. Create a DxPivotGridDataProvider<T> object based on the created method.
  3. Bind the Chart to the provider object. Use the ChartDataSource property.
  4. Bind the Pivot Grid to the provider object. Use the PivotGridDataSource property.
<DxChart Data="@(PivotGridDataProvider.ChartDataSource)">
    <DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
                         ArgumentField="@(s => s.Argument)"
                         ValueField="@(s => s.Value)"
                         SeriesType="ChartSeriesType.Bar" />

<DxPivotGrid Data="@(PivotGridDataProvider.PivotGridDataSource)">
    <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" 
    <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" 
        Area="PivotGridFieldArea.Column" Caption="Year"> </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data" 
        SummaryType="PivotGridSummaryType.Count"> </DxPivotGridField>

@code {
    DxPivotGridDataProvider<SaleInfo> PivotGridDataProvider = DxPivotGridDataProvider<SaleInfo>.Create(Sales.Load());

The Chart shows data from the Pivot Grid's lowest expanded level. The Chart is updated when a user expands or collapses rows/columns in the Pivot Grid.



Use the PageSize property to specify the maximum number of rows a page can display.


To hide the pager, set the ShowPager property to false.


To provide a completely different look and feel of row/column field headers and data cells, use templates: HeaderTemplate and DataTemplate.

<DxPivotGrid Data="@GridData" ShowGrandTotals="@ShowGrandTotals" ShowFieldHeaders="@ShowFieldHeaders">
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Month" Area="PivotGridFieldArea.Column" Caption="Month">
    <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum">
            <span class="@((decimal)context > 100000 ? "text-success" : "text-danger")">
                @string.Format("{0:c0}", context)

Online Demo: Pivot Grid - Templates


DxControlComponent<DxPivotGridBase, DevExpress.Blazor.Internal.JSInterop.PivotGridJSInteropProxy>
DxControlComponent<DxPivotGridBase, DevExpress.Blazor.Internal.JSInterop.PivotGridJSInteropProxy, PivotGridModelBase>
See Also