Skip to main content
All docs
V25.1
  • 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.

    Pivot Table - Templates

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

    Pivot Table - Templates

    Run Demo: Templates