Bind to Data

• Sep 23, 2025
• 5 minutes to read

This document describes how to bind the DevExpress Blazor Pivot Table to data in different scenarios.

Bind to Runtime Data

Run Demo

You can bind the Pivot Table to runtime data created during component initialization.

1. Bind the Data property to a C# field/property.
2. Populate this field/property with data in the OnInitializedAsync lifecycle method.
3. Add fields to the component. For more information, refer to the following article: Data Presentation Basics - Fields.

Razor

@rendermode InteractiveServer

<DxPivotTable Data="SalesData">
    <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>

@code {
    IEnumerable<Sales.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")
        },
    };
}

Bind to Data with Entity Framework Core

View Example: Pivot Table - Data binding using Entity Framework Core

You can use Entity Framework Core in Blazor Server applications. Follow the steps below to bind the Pivot Table to data.

1. Fetch data from a database. See steps 1-6 in the following article:

   Read Tutorial: Bind Components to Data with Entity Framework Core

2. Add a Pivot Table to your application and bind its Data property to the created data collection.

3. Add fields to the component. For more information, refer to the following article: Data Presentation Basics - Fields.

Razor

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
@using DevExpress.Blazor.PivotTable

<DxPivotTable Data="Data">
    <Fields>
        <DxPivotTableField Field="CategoryName"
                           Area="@PivotTableArea.Row" />
        <DxPivotTableField Field="ProductName"
                           Area="@PivotTableArea.Row" />
        <DxPivotTableField Field="OrderDate"
                           Area="@PivotTableArea.Column"
                           GroupInterval="@PivotTableGroupInterval.DateYear"
                           Caption="Year" />
        <DxPivotTableField Field="OrderDate"
                           Area="@PivotTableArea.Column"
                           GroupInterval="@PivotTableGroupInterval.DateQuarter"
                           Caption="Quarter">
            <ValueTemplate>
                <span>@($"Q{context.Text}")</span>
            </ValueTemplate>
        </DxPivotTableField>
        <DxPivotTableField Field="UnitPrice"
                           Area="@PivotTableArea.Data"
                           SummaryType="@PivotTableSummaryType.Sum" />
        <DxPivotTableField Field="ShipCountry"
                           Area="@PivotTableArea.Filter" />
        <DxPivotTableField Field="ShipCity"
                           Area="@PivotTableArea.Filter" />
    </Fields>
</DxPivotTable>

@code {
    NorthwindContext Northwind { get; set; }
    IEnumerable<object> Data { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();

        var products = await Northwind.Products.ToListAsync();
        var categories = await Northwind.Categories.ToListAsync();
        var orders = await Northwind.Orders.ToListAsync();
        var orderDetails = await Northwind.OrderDetails.ToListAsync();

        Data = (from c in categories
                      join p in products on c.CategoryId equals p.CategoryId
                      join od in orderDetails on p.ProductId equals od.ProductId
                      select new {
                          CategoryName = c.CategoryName,
                          ProductName = p.ProductName,
                          UnitPrice = p.UnitPrice,
                          OrderDate = od.Order.OrderDate,
                          ShipCountry = od.Order.ShipCountry,
                          ShipCity = od.Order.ShipCity
                      })
              .ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Virtual Scrolling

If the Pivot Table displays a large number of data cells, enable virtual scrolling to improve performance. Set the VirtualScrollingEnabled property to true. In this mode, the Pivot Table renders data on demand as a user scrolls through rows/columns.

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

Run Demo