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.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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.

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.

Razor

@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();
    }
} 

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
            new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            new SaleInfo {
                OrderId = 10258,
                Region = "Europe",
                Country = "Spain",
                City = "Madrid",
                Amount = 3680,
                Date = DateTime.Parse("2017/01/12")
            },
            new SaleInfo {
                OrderId = 10259,
                Region = "Europe",
                Country = "Russian Federation",
                City = "Moscow",
                Amount = 2260,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10260,
                Region = "Asia",
                Country = "China",
                City = "Beijing",
                Amount = 2910,
                Date = DateTime.Parse("2017/01/26")
            },
            new SaleInfo {
                OrderId = 10261,
                Region = "Asia",
                Country = "Japan",
                City = "Tokyo",
                Amount = 8400,
                Date = DateTime.Parse("2017/01/05")
            },
            new SaleInfo {
                OrderId = 10262,
                Region = "Asia",
                Country = "Republic of Korea",
                City = "Seoul",
                Amount = 1325,
                Date = DateTime.Parse("2017/01/14")
            },
            new SaleInfo {
                OrderId = 10263,
                Region = "Australia",
                Country = "Australia",
                City = "Sydney",
                Amount = 3920,
                Date = DateTime.Parse("2017/01/05")
            },
            new SaleInfo {
                OrderId = 10264,
                Region = "Australia",
                Country = "Australia",
                City = "Melbourne",
                Amount = 2220,
                Date = DateTime.Parse("2017/01/15")
            },
            new SaleInfo {
                OrderId = 10265,
                Region = "Africa",
                Country = "South Africa",
                City = "Pretoria",
                Amount = 940,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10266,
                Region = "Africa",
                Country = "Egypt",
                City = "Cairo",
                Amount = 1630,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10267,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 2910,
                Date = DateTime.Parse("2017/01/23")
            },
            new SaleInfo {
                OrderId = 10268,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 2600,
                Date = DateTime.Parse("2017/01/14")
            },
            new SaleInfo {
                OrderId = 10269,
                Region = "Europe",
                Country = "Spain",
                City = "Madrid",
                Amount = 4340,
                Date = DateTime.Parse("2017/01/26")
            },
            new SaleInfo {
                OrderId = 10270,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6650,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10271,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 490,
                Date = DateTime.Parse("2017/01/22")
            }
        };
    }
    public static Task<IQueryable<SaleInfo>> Load() {
        return Task.FromResult(dataSource.AsQueryable());
    }
}

Fields

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

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

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

<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.
Avg	The average of the field values. This type applies to numeric fields only.
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.

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

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" />
</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.

Run Demo: Pivot Grid - Chart Integration

Paging

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.

Templates

To define 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">
        <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.

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

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>