Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxPivotGrid<T> Class

An Excel-inspired pivot table component engineered for multi-dimensional data analysis and cross-tab reporting.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxPivotGrid<T> :
    DxPivotGrid

#Type Parameters

Name Description
T

The data item type.

#Remarks

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 individual values and display the results within the pivot table’s cells.

PivotGrid Overview

Run Demo: Pivot Grid - Overview Watch Video: Get Started with Pivot Grid

#Add a Pivot Grid to a Project

Follow the steps below to add the Pivot Grid component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxPivotGrid></DxPivotGrid> markup to a .razor file.
  3. Bind the Pivot Grid to a strongly-typed data collection.
  4. Specify fields that supply data to columns, rows, and data cells.
  5. Specify other Pivot Grid options (see the sections below).

#Bind to Data

Use the Data property to bind <DxPivotGrid> to a strongly-typed collection.

Note

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

@if(GridData == null) {
    <p><em>Loading...</em></p>
} else {
    <DxPivotGrid Data="@GridData">
        <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" Area="PivotGridFieldArea.Row"></DxPivotGridField>
        <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.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Area="PivotGridFieldArea.Column" Caption="Quarter">
            <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>
        </DxPivotGridField>
        <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>
    </DxPivotGrid>
}
@code { 
    IQueryable<SaleInfo> GridData;

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

#Fields

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

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

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

PivotGrid Areas

  • Column Header Area contains fields that define grid columns.

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

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

    <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" 
                      Area="PivotGridFieldArea.Data" 
                      Caption="Count"
                      SummaryType="PivotGridSummaryType.Count" />
    

Note

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

#Cells

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

Razor
<DxPivotGridField Field="@nameof(SaleInfo.OrderId)" 
                  Area="PivotGridFieldArea.Data" 
                  Caption="Count"
                  SummaryType="PivotGridSummaryType.Count" />

The available summary types are:

Summary Type Description
Sum
(the default type)
The sum of the field values. This type applies to numeric fields only.
Pivot Grid - The Sum summary type
Avg The average of the field values. This type applies to numeric fields only.
pivot func average
Count The total number of field values.
Max The largest field value.
Min The smallest field value.

#Totals

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.

PivotGrid Totals

#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.

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

PivotGrid Sort Data

#Group Data

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

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

The image below displays DxPivotGrid in two states:

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

PivotGrid Group Data

#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.
Razor
<DxChart Data="@(PivotGridDataProvider.ChartDataSource)">
    <DxChartCommonSeries NameField="@((IChartDataItem s) => s.SeriesName)"
                         ArgumentField="@(s => s.Argument)"
                         ValueField="@(s => s.Value)"
                         SeriesType="ChartSeriesType.Bar" />
</DxChart>

<DxPivotGrid Data="@(PivotGridDataProvider.PivotGridDataSource)">
    <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" 
        Area="PivotGridFieldArea.Row"></DxPivotGridField>
    <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>
</DxPivotGrid>

@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.

Linked PivotGrid And Chart

Run Demo: Pivot Grid - Chart Integration

#Paging

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

PivotGrid Sort Paging

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

#Templates

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

Razor
<DxPivotGrid Data="@GridData" ShowGrandTotals="@ShowGrandTotals" ShowFieldHeaders="@ShowFieldHeaders">
    <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Month" Area="PivotGridFieldArea.Column" Caption="Month">
        <HeaderTemplate>
            @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName((int)context)
        </HeaderTemplate>
    </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum">

        <DataTemplate>
            <span class="@((decimal)context > 100000 ? "text-success" : "text-danger")">
                @string.Format("{0:c0}", context)
            </span>
        </DataTemplate>
    </DxPivotGridField>
</DxPivotGrid>

Run Demo: Pivot Grid - Templates

#Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

#Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.PivotGridJSInteropProxy>
DxControlComponent<DevExpress.Blazor.Internal.JSInterop.PivotGridJSInteropProxy>
DxControlComponent<DevExpress.Blazor.Internal.JSInterop.PivotGridJSInteropProxy, PivotGridModelBase>
DxPivotGrid
DxPivotGrid<T>
See Also