Data Shaping

• Jun 23, 2025
• 11 minutes to read

The DevExpress Blazor Pivot Table allows you to sort, group, and filter data.

Sort Data

The Blazor Pivot Table automatically sorts values in column and row areas. A sort glyph next to a field caption indicates the sort order (ascending or descending). The default order is ascending. To set a sort order in code, use the field’s SortOrder property.

<DxPivotTable Data="SalesData" @ref="PivotTable">
    <Fields>
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Country)"
                           Area="@PivotTableArea.Row"
                           AreaIndex="1"
                           SortOrder="@PivotTableSortOrder.Descending"/>
        @*...*@
    </Fields>
</DxPivotTable>

Click a field caption in the Pivot Table’s header area to sort data in the UI.

Group Data

The Blazor Pivot Table automatically groups data if the Rows or Columns area include multiple fields. All groups expand on data load. You can set the AutoExpandGroups property to false to collapse groups. You can also use the ExpandAllGroups/CollapseAllGroups methods to expand/collapse all groups at runtime.

Razor

@rendermode InteractiveServer

<DxPivotTable Data="SalesData" @ref="PivotTable">
    <Fields>
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Region)"
                           Area="@PivotTableArea.Row"
                           AreaIndex="0" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Country)"
                           Area="@PivotTableArea.Row"
                           SortOrder="@PivotTableSortOrder.Descending"
                           AreaIndex="1" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateYear"
                           Area="@PivotTableArea.Column"
                           AreaIndex="0" 
                           Caption="Year" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter"
                           Area="@PivotTableArea.Column"
                           AreaIndex="1"
                           Caption="Quarter" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Amount)"
                           SortOrder="@PivotTableSortOrder.Ascending"
                           Area="@PivotTableArea.Data"
                           SummaryType="@PivotTableSummaryType.Sum" />
    </Fields>
</DxPivotTable>
<p></p>
<DxToolbar>
    <Items>
        <DxToolbarItem Text="Collapse Groups" Click="() => PivotTable.CollapseAllGroups()" />
        <DxToolbarItem Text="Expand Groups" Click="() => PivotTable.ExpandAllGroups()" />  
    </Items>
</DxToolbar>

@code {
    IPivotTable PivotTable { get; set; }
    IEnumerable<SaleInfo> SalesData;
    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
}

Sales.cs

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

public class Sales {
    static IList<SaleInfo> dataSource;

    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; }
    }

    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    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/02/13")
        },
        new SaleInfo {
            OrderId = 10250,
            Region = "North America",
            Country = "United States",
            City = "Denver",
            Amount = 2235,
            Date = DateTime.Parse("2017/02/07")
        },
        new SaleInfo {
            OrderId = 10251,
            Region = "North America",
            Country = "Canada",
            City = "Vancouver",
            Amount = 1965,
            Date = DateTime.Parse("2017/03/03")
        },
        new SaleInfo {
            OrderId = 10252,
            Region = "North America",
            Country = "Canada",
            City = "Edmonton",
            Amount = 880,
            Date = DateTime.Parse("2017/03/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/05/21")
        },
        new SaleInfo {
            OrderId = 10255,
            Region = "South America",
            Country = "Paraguay",
            City = "Asuncion",
            Amount = 3140,
            Date = DateTime.Parse("2017/05/01")
        },
        new SaleInfo {
            OrderId = 10256,
            Region = "Europe",
            Country = "United Kingdom",
            City = "London",
            Amount = 6175,
            Date = DateTime.Parse("2017/06/24")
        },
        new SaleInfo {
            OrderId = 10257,
            Region = "Europe",
            Country = "Germany",
            City = "Berlin",
            Amount = 4575,
            Date = DateTime.Parse("2017/06/11")
        },
        new SaleInfo {
            OrderId = 10517,
            Region = "North America",
            Country = "United States",
            City = "New York",
            Amount = 7710,
            Date = DateTime.Parse("2018/07/18")
        },
        new SaleInfo {
            OrderId = 10518,
            Region = "North America",
            Country = "United States",
            City = "Los Angeles",
            Amount = 7975,
            Date = DateTime.Parse("2018/01/10")
        },
        new SaleInfo {
            OrderId = 10519,
            Region = "North America",
            Country = "United States",
            City = "Denver",
            Amount = 3285,
            Date = DateTime.Parse("2018/03/13")
        },
        new SaleInfo {
            OrderId = 10520,
            Region = "North America",
            Country = "Canada",
            City = "Vancouver",
            Amount = 2580,
            Date = DateTime.Parse("2018/04/22")
        },
        new SaleInfo {
            OrderId = 10521,
            Region = "North America",
            Country = "Canada",
            City = "Edmonton",
            Amount = 2160,
            Date = DateTime.Parse("2018/05/26")
        },
        new SaleInfo {
            OrderId = 10522,
            Region = "South America",
            Country = "Brazil",
            City = "Rio de Janeiro",
            Amount = 1100,
            Date = DateTime.Parse("2018/05/25")
        },
        new SaleInfo {
            OrderId = 10523,
            Region = "South America",
            Country = "Argentina",
            City = "Buenos Aires",
            Amount = 4425,
            Date = DateTime.Parse("2018/08/21")
        },
        new SaleInfo {
            OrderId = 10524,
            Region = "South America",
            Country = "Paraguay",
            City = "Asuncion",
            Amount = 1360,
            Date = DateTime.Parse("2018/08/22")
        },
        new SaleInfo {
            OrderId = 10525,
            Region = "Europe",
            Country = "United Kingdom",
            City = "London",
            Amount = 3250,
            Date = DateTime.Parse("2018/11/14")
        },
        new SaleInfo {
            OrderId = 10526,
            Region = "Europe",
            Country = "Germany",
            City = "Berlin",
            Amount = 5550,
            Date = DateTime.Parse("2018/12/21")
        },
    };
}

The GroupInterval property allows you to specify how the Pivot Table groups the field values. Predefined options include Alphabetical, Numeric, and multiple date-related intervals. You can also implement a custom group logic.

<DxPivotTable Data="SalesData">
    <Fields>
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateYear"
                           Area="@PivotTableArea.Column"
                           AreaIndex="0" 
                           Caption="Year" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter"
                           Area="@PivotTableArea.Column"
                           AreaIndex="1"
                           Caption="Quarter" >
            <ValueTemplate>
                <span>@($"Q{context.Text}")</span>
            </ValueTemplate>
        </DxPivotTableField>
        @*...*@
    </Fields>
</DxPivotTable>

The following image displays two Pivot Tables:

• The first Pivot Table contains one field bound to the Date data source field. It displays original field values as column headers.
• The second Pivot Table contains two fields bound to the Date data source field. The field values are grouped by years and quarters (see code above).

Filter Data

The following sections describe how you can filter Pivot Table data in code and in the UI:

• Filter UI
• Filter API

Filter UI

The Pivot Table allows you to define filter fields. These fields do not display their data in the table, but allow users to filter Pivot Table data based on their values.

You can define filter fields in the component markup:

1. Add DxPivotTableField objects to the Fields collection.

2. Use the Area property to specify a field area - Filter.

   <DxPivotTable Data="@PivotData">
       <Fields>
           @*...*@
           <DxPivotTableField Field="@nameof(VehiclesData.TrademarkItem.Modification)"
                              Area="@PivotTableArea.Filter"/>
           <DxPivotTableField Field="@nameof(VehiclesData.TrademarkItem.BodyStyle)"
                              Name="@BodyStyleName"
                              Area="@PivotTableArea.Filter" />
           <DxPivotTableField Field="@nameof(VehiclesData.TrademarkItem.SalesDate)"
                              GroupInterval="@PivotTableGroupInterval.Date"
                              Name="fieldSalesDate"
                              Area="@PivotTableArea.Filter" />
       </Fields>
   <DxPivotTable>
   

The Pivot Table displays filter field headers in the Filter Header Area.

You can apply filters both to filter fields and to row/column fields. The Pivot Table displays filter menu buttons in the headers of all these fields. When a user clicks a filter menu button for any field, the Pivot Table displays a Filter Menu with all unique values of the field. Users can select or deselect these values to filter Pivot Table data.

You can also apply filters in the Field List.

Users can resize a Filter Menu using a size grip in the bottom right corner.

Run Demo: Filter UI

Hide Filter UI Elements

The Pivot Table displays the Filter Header Area even if it does not contain filter fields. Use the FilterHeaderAreaDisplayMode property to set the Filter Header Area’s visibility.

You can use the following properties to set the filter menu button’s visibility:

DxPivotTable.FilterMenuButtonDisplayMode

Specifies whether filter menu buttons are visible for all field headers.

DxPivotTableField.FilterMenuButtonDisplayMode

Specifies whether a filter menu button is visible for a specific field.

Customize the Filter Menu

You can use the following API to customize the Filter Menu:

CustomizeFilterMenu

This event fires before the Filter Menu is displayed and allows you to customize filter items.

DxPivotTableField.FilterMenuTemplate

Specifies the template for the content within the field’s Filter Menu. You can switch between hierarchical and list views for DateTime, DateTime?, and DateOnly values in this template.

DxPivotTable.FieldFilterMenuTemplate

Specifies the template for all Filter Menus in the Pivot Table.

Run Demo: Filter UI

Filter API

Run Demo

You can use the following API members to filter Pivot Table data in code:

SetFilterCriteria(CriteriaOperator)

Applies a filter to Pivot Table data. Create a criteria operator object that specifies the filter expression and pass this object to the SetFilterCriteria method. For more information about criteria operators, see the following topic: Criteria Language Syntax.

FilterCriteriaChanged

Fires when filter criteria applied to Pivot Table data changes.

GetFilterCriteria()

Returns the filter criteria applied to Pivot Table data.

ClearFilter()

Clears all filter criteria applied to Pivot Table data.

The following code adds a toolbar that allows you to specify a filter for Pivot Table data (Region = “North America”) and clear the filter. The code also gets the filter criteria and displays it under the Pivot Table.

Razor

@rendermode InteractiveServer
@using Services
@using DevExpress.Data.Filtering

<DxToolbar ItemClick="@OnItemClick">
    <Items>
        <DxToolbarItem Name="_setFilterCriteria" Text="Set Filter Criteria" Tooltip="Set Filter Criteria" />
        <DxToolbarItem Name="_clearFilterCriteria" Text="Clear Filter Criteria" Tooltip="Clear Filter Criteria" />
    </Items>
</DxToolbar>
<br />

<DxPivotTable Data="SalesData" @ref="PivotTable">
    <Fields>
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Region)"
                           Area="@PivotTableArea.Row"
                           AreaIndex="0" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Country)"
                           Area="@PivotTableArea.Row"
                           SortOrder="@PivotTableSortOrder.Descending"
                           AreaIndex="1" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateYear"
                           Area="@PivotTableArea.Column"
                           AreaIndex="0"
                           Caption="Year" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter"
                           Area="@PivotTableArea.Column"
                           AreaIndex="1"
                           Caption="Quarter" />
        <DxPivotTableField Field="@nameof(Sales.SaleInfo.Amount)"
                           SortOrder="@PivotTableSortOrder.Ascending"
                           Area="@PivotTableArea.Data"
                           SummaryType="@PivotTableSummaryType.Sum" />
    </Fields>
</DxPivotTable>

<p class="cw-480 mt-3">
    Filter Criteria: <b>@PivotTable?.GetFilterCriteria()?.ToString()</b>
</p>

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

    IPivotTable PivotTable { get; set; }
    void OnItemClick(ToolbarItemClickEventArgs e) {
        switch (e.ItemName) {
            case "_setFilterCriteria":
                PivotTable.SetFilterCriteria(new BinaryOperator(nameof(Sales.SaleInfo.Region), "North America", BinaryOperatorType.Equal));
                break;
            case "_clearFilterCriteria":
                PivotTable.ClearFilter();
                break;
        }
    }
}

Sales.cs

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

public class Sales {
    static IList<SaleInfo> dataSource;

    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; }
    }

    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    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/02/13")
        },
        new SaleInfo {
            OrderId = 10250,
            Region = "North America",
            Country = "United States",
            City = "Denver",
            Amount = 2235,
            Date = DateTime.Parse("2017/02/07")
        },
        new SaleInfo {
            OrderId = 10251,
            Region = "North America",
            Country = "Canada",
            City = "Vancouver",
            Amount = 1965,
            Date = DateTime.Parse("2017/03/03")
        },
        new SaleInfo {
            OrderId = 10252,
            Region = "North America",
            Country = "Canada",
            City = "Edmonton",
            Amount = 880,
            Date = DateTime.Parse("2017/03/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/05/21")
        },
        new SaleInfo {
            OrderId = 10255,
            Region = "South America",
            Country = "Paraguay",
            City = "Asuncion",
            Amount = 3140,
            Date = DateTime.Parse("2017/05/01")
        },
        new SaleInfo {
            OrderId = 10256,
            Region = "Europe",
            Country = "United Kingdom",
            City = "London",
            Amount = 6175,
            Date = DateTime.Parse("2017/06/24")
        },
        new SaleInfo {
            OrderId = 10257,
            Region = "Europe",
            Country = "Germany",
            City = "Berlin",
            Amount = 4575,
            Date = DateTime.Parse("2017/06/11")
        },
        new SaleInfo {
            OrderId = 10517,
            Region = "North America",
            Country = "United States",
            City = "New York",
            Amount = 7710,
            Date = DateTime.Parse("2018/07/18")
        },
        new SaleInfo {
            OrderId = 10518,
            Region = "North America",
            Country = "United States",
            City = "Los Angeles",
            Amount = 7975,
            Date = DateTime.Parse("2018/01/10")
        },
        new SaleInfo {
            OrderId = 10519,
            Region = "North America",
            Country = "United States",
            City = "Denver",
            Amount = 3285,
            Date = DateTime.Parse("2018/03/13")
        },
        new SaleInfo {
            OrderId = 10520,
            Region = "North America",
            Country = "Canada",
            City = "Vancouver",
            Amount = 2580,
            Date = DateTime.Parse("2018/04/22")
        },
        new SaleInfo {
            OrderId = 10521,
            Region = "North America",
            Country = "Canada",
            City = "Edmonton",
            Amount = 2160,
            Date = DateTime.Parse("2018/05/26")
        },
        new SaleInfo {
            OrderId = 10522,
            Region = "South America",
            Country = "Brazil",
            City = "Rio de Janeiro",
            Amount = 1100,
            Date = DateTime.Parse("2018/05/25")
        },
        new SaleInfo {
            OrderId = 10523,
            Region = "South America",
            Country = "Argentina",
            City = "Buenos Aires",
            Amount = 4425,
            Date = DateTime.Parse("2018/08/21")
        },
        new SaleInfo {
            OrderId = 10524,
            Region = "South America",
            Country = "Paraguay",
            City = "Asuncion",
            Amount = 1360,
            Date = DateTime.Parse("2018/08/22")
        },
        new SaleInfo {
            OrderId = 10525,
            Region = "Europe",
            Country = "United Kingdom",
            City = "London",
            Amount = 3250,
            Date = DateTime.Parse("2018/11/14")
        },
        new SaleInfo {
            OrderId = 10526,
            Region = "Europe",
            Country = "Germany",
            City = "Berlin",
            Amount = 5550,
            Date = DateTime.Parse("2018/12/21")
        },
    };
}