Migrate from Pivot Grid to Pivot Table

Dec 11, 2025
7 minutes to read

We released a new Pivot Table component to replace the Pivot Grid component.

Important

The Pivot Grid is in maintenance mode. We will add new features/capabilities to the new Pivot Table component only.

Feature Comparison

The following table compares the two components. Note that we continue to add functionality to the new component. We plan to replicate all the functionality available in the Pivot Grid.

Data Binding	Pivot Table	Pivot Grid
Large Datasets
Data Presentation	Pivot Table	Pivot Grid
Totals, Grand Totals
Show/Hide Totals API
Summary Function Types
Field Customization in the UI
Shape Data	Pivot Table	Pivot Grid
Group Data
Group Interval		Only DateTime values
Expand/Collapse Groups API
Sort Data
Filter Data in the UI
Filter Menu Customization
Filter API
Appearance	Pivot Table	Pivot Grid
Themes Support
Field Header Template
Field Value Template
Data Cell Template
Data Cell Format
Navigation	Pivot Table	Pivot Grid
Paging
Vertical Scrolling
Horizontal Scrolling
Virtual Scrolling
Fixed Columns and Rows Areas
Save/Restore Layout	Pivot Table	Pivot Grid
Save/Restore Layout Automatically
Save/Restore Layout On Demand
Accessibility	Pivot Table	Pivot Grid
Accessibility Support
Keyboard Navigation
Others	Pivot Table	Pivot Grid
Chart Integration

Set Up Your Project

The Pivot Grid does not require additional setup. However, you need to register Pivot Table resources to use the Pivot Table component.

Component Name

Update the component name from DxPivotGrid to DxPivotTable.

Pivot Grid

<DxPivotGrid>
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable>
    @*...*@
</DxPivotTable>

Bind to Data

Both components have a Data property, but they accept different data collection types:

DxPivotGrid.Data accepts a generic IEnumerable<T> collection.
DxPivotTable.Data accepts an Object.

In-Memory Data Binding

You can bind the Pivot Table component to in-memory data source without code changes.

Pivot Grid

<DxPivotGrid Data="@Data">
    @*...*@
</DxPivotGrid>

@code {
    IEnumerable<Sales.SaleInfo> Data;
    protected override async Task OnInitializedAsync() {
        Data = await Sales.GetSalesAsync();
    }
}

Pivot Table

<DxPivotTable Data="@Data">
    @*...*@
</DxPivotTable>

@code {
    IEnumerable<Sales.SaleInfo> Data;
    protected override async Task OnInitializedAsync() {
        Data = await Sales.GetSalesAsync();
    }
}

Server-Side Data Processing

The Pivot Grid supports an IQueryable collection. The Pivot Table does not support it yet and processes all data in memory. If you use IQueryable<T> with the Pivot Grid to handle large datasets on the server side, you need to load all data into memory for the Pivot Table. We are going to implement Server Mode for the Pivot Table in future.

Pivot Grid

<DxPivotGrid Data="@Data">
    @*...*@
</DxPivotGrid>

@code {
    IQueryable<SaleInfo> Data { get; set; }
    // Data is processed on the server side
}

Pivot Table

<DxPivotTable Data="@Data">
    @*...*@
</DxPivotTable>

@code {
    IEnumerable<SaleInfo> Data { get; set; }
    // All data must be loaded into memory
}

Field Declaration

The following table explains how to update a field declaration when you migrate to the new Pivot Table:

	Pivot Grid	Pivot Table
Field collection	You placed field objects directly between the `<DxPivotGrid>` and `</DxPivotGrid>` tags.	Add `<Fields>...</Fields>` tags to the component markup to define the Fields collection.
Field object	DxPivotGridField	DxPivotTableField
Field name property	Field	Field
Field area property	Area (accepts PivotGridFieldArea	Area (accepts PivotTableArea)
More field properties	See DxPivotGridField Members.	See DxPivotTableField Members.

Pivot Grid

<DxPivotGrid Data="@Data">
    <DxPivotGridField Field="@nameof(SaleInfo.Region)"
                      Area="PivotGridFieldArea.Row" />
    <DxPivotGridField Field="@nameof(SaleInfo.Country)"
                      Area="PivotGridFieldArea.Row" />
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data">
    <Fields>
        <DxPivotTableField Field="@nameof(SaleInfo.Region)"
                           Area="@PivotTableArea.Row" />
        <DxPivotTableField Field="@nameof(SaleInfo.Country)"
                           Area="@PivotTableArea.Row" />
    </Fields>
</DxPivotTable>

Read Tutorial: Fields in Pivot Table

Summary Type

Both components allow you to specify the summary function type for data fields. The Pivot Table offers more summary function types compared to the Pivot Grid.

The following table compares summary-related API:

	Pivot Grid	Pivot Table
Summary type property	SummaryType	SummaryType
Summary type enumeration	PivotGridSummaryType	PivotTableSummaryType
Supported summary types	Sum, Min, Max, Avg, Count	Sum, Min, Max, Average, Count, StdDev, StdDevp, Var, Varp, CountDistinct, Median, Mode

You need to replace the enumeration used for the SummaryType property. Note that the Pivot Grid’s Avg type is equivalent to the Pivot Table’s Average type.

Pivot Grid

<DxPivotGrid Data="@Data">
    <DxPivotGridField Field="@nameof(SaleInfo.Amount)"
                      Area="PivotGridFieldArea.Data"
                      SummaryType="PivotGridSummaryType.Avg" />
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data">
    <Fields>
        <DxPivotTableField Field="@nameof(SaleInfo.Amount)"
                           Area="PivotTableArea.Data"
                           SummaryType="PivotTableSummaryType.Average" />
        @*...*@
    </Fields>
</DxPivotTable>

Read Tutorial: Data Cells, Summaries in Pivot Table

Sort Data

Both the Pivot Grid and new Pivot Table can sort data and have similar API:

	Pivot Grid	Pivot Table
Sort order property	SortOrder	SortOrder
Sort order enumeration	PivotGridSortOrder	PivotTableSortOrder

You only need to replace the enumeration for the SortOrder property.

Pivot Grid

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

Pivot Table

<DxPivotTableField Field="@nameof(SaleInfo.Region)"
                   Area="@PivotTableArea.Row"
                   SortOrder="@PivotTableSortOrder.Descending" />

Read Tutorial: Sort Data in Pivot Table

Group Data

Both the Pivot Grid and the new Pivot Table can group data. The Pivot Table offers more group interval options and API.

The following table compares grouping-related API:

	Pivot Grid	Pivot Table
Group interval property	GroupInterval	GroupInterval
Group interval enumeration	PivotGridGroupInterval	PivotTableGroupInterval
Supported group intervals	Year, Quarter, Month	Alphabetical, Numeric, Date, and multiple date-related intervals (Year, Quarter, Month, Day, Hour, etc.)
Expand/Collapse groups API		AutoExpandGroups, ExpandAllGroups, CollapseAllGroups methods

You need to replace the enumeration for the GroupInterval property. You can also use the Pivot Table methods to expand or collapse all groups.

Pivot Grid

<DxPivotGrid Data="@Data">
    <DxPivotGridField Field="@nameof(SaleInfo.Date)"
                      Area="PivotGridFieldArea.Column"
                      GroupInterval="PivotGridGroupInterval.Year"/>
    <DxPivotGridField Field="@nameof(SaleInfo.Date)"
                      Area="PivotGridFieldArea.Column"
                      GroupInterval="PivotGridGroupInterval.Quarter" />
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data" @ref="PivotTable">
    <Fields>
        <DxPivotTableField Field="@nameof(SaleInfo.Date)"
                           Area="@PivotTableArea.Column"
                           GroupInterval="@PivotTableGroupInterval.DateYear" />
        <DxPivotTableField Field="@nameof(SaleInfo.Date)"
                           Area="@PivotTableArea.Column"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter" />
        @*...*@
    </Fields>
</DxPivotTable>

Read Tutorial: Group Data in Pivot Table

Totals, Grand Totals

Both components calculate and display totals/grand totals. The Pivot Table offers more API to control totals visibility and position.

The following table compares totals-related API:

	Pivot Grid	Pivot Table
Show/hide grand totals	ShowGrandTotals	ShowRowGrandTotals, ShowColumnGrandTotals
Show/hide totals		ShowRowTotals, ShowColumnTotals
Totals position		RowTotalsPosition, ColumnTotalsPosition

If you used the ShowGrandTotals property, you need to replace it with the new properties. Additionally, you can use Pivot Table properties to show/hide totals and set their position.

Pivot Grid

<DxPivotGrid Data="@Data"
             ShowGrandTotals="false">
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data"
              ShowRowGrandTotals="false"
              ShowColumnGrandTotals="false">
    <Fields>
        @*...*@
    </Fields>
</DxPivotTable>

Read Tutorial: Totals/Grand Totals in Pivot Table

Templates

Both components support templates for field values and data cells. The Pivot Table implements additional template options.

The following table compares template-related API:

	Pivot Grid	Pivot Table
Field value template	HeaderTemplate	DxPivotTableField.ValueTemplate, DxPivotTable.FieldValueTemplate
Field header template		DxPivotTableField.HeaderTemplate, DxPivotTable.FieldHeaderTemplate
Data cell template	DataTemplate	DxPivotTableField.CellTemplate, DxPivotTable.FieldCellTemplate

You need to update HeaderTemplate with ValueTemplate, and DataTemplate with CellTemplate.

Pivot Grid

<DxPivotGrid Data="@Data">
    <DxPivotGridField Field="@nameof(SaleInfo.Date)"
                      GroupInterval="PivotGridGroupInterval.Quarter"
                      Area="PivotGridFieldArea.Column"
                      Caption="Quarter">
        <HeaderTemplate>@($"Q{context}")</HeaderTemplate>
    </DxPivotGridField>
    <DxPivotGridField Field="@nameof(SaleInfo.Amount)"
                      Area="PivotGridFieldArea.Data">
        <DataTemplate>
            <span class="@((decimal)context > 100000 ? "text-success" : "text-danger")">
                @string.Format("{0:c0}", context)
            </span>
        </DataTemplate>
    </DxPivotGridField>
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data">
    <Fields>
        <DxPivotTableField Field="@nameof(SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter"
                           Area="@PivotTableArea.Column"
                           Caption="Quarter">
            <ValueTemplate>@($"Q{context.Text}")</ValueTemplate>
        </DxPivotTableField>
        <DxPivotTableField Field="@nameof(SaleInfo.Amount)"
                           Area="@PivotTableArea.Data"
                           SummaryType="@PivotTableSummaryType.Sum">
            <CellTemplate>
                <span class="@((decimal)context.Value > 100000 ? "text-success" : "text-danger")">
                    @string.Format("{0:c0}", context.Value)
                </span>
            </CellTemplate>
        </DxPivotTableField>
        @*...*@
    </Fields>
</DxPivotTable>

Read Tutorial: Templates in Pivot Table

The Pivot Grid implements data navigation using a built-in pager. The Pivot Table supports data scrolling.

The following table compares navigation-related API and behavior:

	Pivot Grid	Pivot Table
Paging	ShowPager, PageSize
Vertical scrolling		Enabled by default
Horizontal scrolling	Enabled by default	Enabled by default
Virtual scrolling		VirtualScrollingEnabled
Fixed columns and rows areas		Enabled by default

If you used the ShowPager and PageSize properties in the Pivot Grid, you need to remove them. Optionally, you can enable virtual scrolling (VirtualScrollingEnabled) to improve performance when displaying large datasets.

Pivot Grid

<DxPivotGrid Data="@Data"
             ShowPager="true"
             PageSize="10">
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data"
              VirtualScrollingEnabled="true">
    <Fields>
        @*...*@
    </Fields>
</DxPivotTable>

Read Tutorial: Scrolling in Pivot Table

Hide Field Headers

The Pivot Grid allows you to show/hide field headers using the ShowFieldHeaders property. The Pivot Table does not have an equivalent property. Remove it from the component markup.

Pivot Grid

<DxPivotGrid Data="@Data"
             ShowFieldHeaders="false">
    @*...*@
</DxPivotGrid>

Pivot Table

<DxPivotTable Data="@Data">
    @*...*@
</DxPivotTable>

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Feature Comparison

Set Up Your Project

Component Name

Bind to Data

In-Memory Data Binding

Server-Side Data Processing

Field Declaration

Summary Type

Sort Data

Group Data

Totals, Grand Totals

Templates

Navigation

Hide Field Headers