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>