The requested page is not available for the requested platform. You are viewing the content for Default platform.

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

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.

<DxPivotGrid Data=@GridData>


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:

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



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




See Also