Skip to main content
All docs
V25.1
  • Bind to Data

    • 4 minutes to read

    Use the Data property to bind the Pivot Table component to a data source. Then you can add fields to the component. For more information, refer to the following article: Data Presentation Basics - Fields.

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

    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>
    

    Virtual Scrolling

    Run Demo