Templates
- 4 minutes to read
The DevExpress Pivot Table component allows you to use templates to customize the appearance of field headers, field values, and data cells.
The following templates are available at the component level:
- FieldHeaderTemplate
- Specifies a common template to display field captions in the header area.
- FieldValueTemplate
- Specifies a common template to display field values in rows or columns.
- FieldCellTemplate
- Specifies a common template for all data cells in the Pivot Table.
The following templates allows you to specify templates for individual fields:
- HeaderTemplate
- Specifies a template to display the current field’s caption.
- ValueTemplate
- Specifies a template to display the current field’s values.
- CellTemplate
- Specifies a template for data cells that correspond to the current field.
The following code applies ValueTemplate
and CellTemplate
to individual 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" >
<ValueTemplate>
<span>@($"Q{context.Text}")</span>
</ValueTemplate>
</DxPivotTableField>
<DxPivotTableField Field="@nameof(Sales.SaleInfo.Amount)"
SortOrder="@PivotTableSortOrder.Ascending"
Area="@PivotTableArea.Data"
SummaryType="@PivotTableSummaryType.Sum">
<CellTemplate>
<span class="fw-bold">@context.Value</span>
</CellTemplate>
</DxPivotTableField>
</Fields>
</DxPivotTable>
@code {
IEnumerable<Sales.SaleInfo> SalesData;
protected override async Task OnInitializedAsync() {
SalesData = await Sales.GetSalesAsync();
}
}