Events in Blazor Pivot Table

24 Aug 202624 minutes to read

The Blazor Pivot Table exposes events that let you hook into its lifecycle, customize rendering, respond to user actions (selection, drill, edit), and react to export and engine updates. All events are wired through the PivotViewEvents (or PivotFieldListEvents) child tag, and event handlers receive strongly typed arguments. Most samples in this page use the ProductDetails model defined in the Getting Started topic under Assigning sample data to the pivot table.

NOTE

The events listed below are grouped by topic for easier scanning. Events documented elsewhere in the documentation are summarized here with a one-line description and a link to the full topic.

Lifecycle events

OnLoad

The OnLoad event fires when the Pivot Table is initialized, before the engine begins populating data. It is available in both Pivot Table and Field List. For a usage example, refer to the Data binding event documentation.

Layout and rendering events

BeforeColumnsRender

The event BeforeColumnsRender triggers while framing each column for rendering in the pivot table. It allows users to customize the text alignment, column visibility, autofit, reordering, and minimum and maximum width for a specific column. It has the following parameters:

AggregateMenuOpen

To know more about this event, refer here.

BeforeColumnsRender

The event BeforeColumnsRender triggers while framing each columns for rendering in the pivot table. It allows the user to customize the text alignment, column visibility, autofit, re-ordering, minimum and maximum width for a specific column. It has the following parameters:

  • Columns: It holds the leaf level columns (i.e., value headers) information.

  • DataSourceSettings: It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on.

  • StackedColumns: It holds the drilled columns (i.e., including column and value headers) information.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails">
    <PivotViewDataSourceSettings DataSource="@data" ExpandAll="true">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
            <PivotViewValue Name="In_Stock" Caption="In Stock"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
            <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>        
     <PivotViewEvents TValue="ProductDetails" BeforeColumnsRender="ColumnRender"></PivotViewEvents>   
</SfPivotView>

@code{
    private List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        data = ProductDetails.GetProductData().ToList();
        // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void ColumnRender(ColumnRenderEventArgs args)
    {
        // triggers before the columns are rendered.
    }
}

BeforeExport

To know more about this event, refer here.

Drill events

BeginDrillThrough

The event BeginDrillThrough is triggered when the value cell is clicked in the Pivot Table while editing. To use this event, users need to enable the editing option using the PivotViewCellEditSettings class. It has the following parameters: CellInfo and Type. This event allows users to view the CellInfo which contains ColumnHeaders, CurrentCell, CurrentTarget, RawData, RowHeaders and Value.

NOTE

In this event, the parameter GridObj is returned as null due to its size.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" BeginDrillThrough="beginDrill"></PivotViewEvents>
    <PivotViewCellEditSettings AllowEditing=true AllowAdding=true AllowDeleting=true Mode=EditMode.Normal></PivotViewCellEditSettings>
</SfPivotView>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void beginDrill(BeginDrillThroughEventArgs args)
    {
        //args.CellInfo -> consists of cell info for drillthrough
    }

}

CalculatedFieldCreate

To know more about this event, refer here.

Selection and interaction events

CellClick

The CellClick event is triggered whenever a cell in the Pivot Table component is clicked. This event has an argument named Data that exposes RowHeaders, ColumnHeaders, FormattedText, and CssClass (among others) for the clicked cell. Using this event, end users can customize the selected cell’s information to their specific requirements.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" CellClick="cellClick"></PivotViewEvents>
</SfPivotView>

<style>
    .e-pivotview .e-custom {
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px !important;
        background: pink !important;
    }
</style>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void cellClick(CellClickEventArgs args)
    {
        // Here, we check that the selected cell belongs to the "France" row, and the "FY 2015" column, and that its value is "450".
        if (args.Data.RowHeaders == "France" && args.Data.ColumnHeaders == "FY 2015" && args.Data.FormattedText == "450")
        {
            // If it does, we apply custom styles to the selected cell
            args.Data.CssClass = "e-custom";
        }
    }
}

CellSelected

To know more about this event, refer here.

CellSelecting

The event CellSelecting is triggered when cell selection is about to initiate in the Pivot Table. To use this event, the AllowSelection property in PivotViewGridSettings must be set to true. It has the following parameters: Cancel, CurrentCell, IsCellClick and Data. For instance, using this event, users can pass the selected cell information to any external component for data binding.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails">
	<PivotViewDataSourceSettings DataSource="@data">
		<PivotViewColumns>
			<PivotViewColumn Name="Year"></PivotViewColumn>
			<PivotViewColumn Name="Quarter"></PivotViewColumn>
		</PivotViewColumns>
		<PivotViewRows>
			<PivotViewRow Name="Country"></PivotViewRow>
			<PivotViewRow Name="Products"></PivotViewRow>
		</PivotViewRows>
		<PivotViewValues>
			<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
			<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
		</PivotViewValues>
	</PivotViewDataSourceSettings>
	<PivotViewGridSettings AllowSelection="true">
		<PivotViewSelectionSettings CellSelectionMode=PivotCellSelectionMode.Box Type=PivotTableSelectionType.Multiple Mode=SelectionMode.Cell></PivotViewSelectionSettings>
	</PivotViewGridSettings>
	<PivotViewEvents TValue="ProductDetails" CellSelecting="cellSelecting"></PivotViewEvents>
</SfPivotView>

@code {
	public List<ProductDetails> data { get; set; }
	protected override void OnInitialized()
	{
		this.data = ProductDetails.GetProductData().ToList();
		//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
	}
	private void cellSelecting(PivotCellSelectedEventArgs args)
	{
		if (args.Data != null)
		{
			// args.Data -> get selected cells information
		}
	}
}

Chart events

ChartSeriesCreated

The event ChartSeriesCreated is triggered once chart series are completely rendered. This event is triggered only when the View property in the PivotViewDisplayOption class is set to Chart. It has the following parameters: Cancel, and Series. When the parameter Cancel is set to true, chart series rendering is canceled.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>
    <PivotViewEvents TValue="ProductDetails" ChartSeriesCreated="chartSeries"></PivotViewEvents>
</SfPivotView>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void chartSeries(ChartSeriesCreatedEventArgs args)
    {
        args.Cancel = true;//chart series will not be rendered
    }
}

Conditional formatting and value events

ConditionalFormatting

The event ConditionalFormatting is triggered initially when the ADD CONDITION button is clicked inside the conditional formatting dialog, to fill a user-specific condition instead of the default condition at runtime. To use this event, the AllowConditionalFormatting property in the SfPivotView class must be set to true. It has the following parameters: ApplyGrandTotals, Conditions, Label, Measure, Style, Value1 and Value2.

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Buttons

<SfButton CssClass="apply-button" IsPrimary="true" OnClick="@OnClick">Apply Format</SfButton>
<SfPivotView TValue="ProductDetails" @ref="@Pivot" AllowConditionalFormatting="true">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" ConditionalFormatting="conditionalFormat"></PivotViewEvents>
</SfPivotView>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    SfPivotView<ProductDetails> Pivot;
    public async Task OnClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        await this.Pivot.ShowConditionalFormattingDialogAsync();
    }
    private void conditionalFormat(ConditionalFormatSettings args)
    {
        //to change the conditional formatting settings in conditional format dialog
        args.Style.BackgroundColor = "Blue";
        args.Value1 = 23459;
    }
}

Data and engine events

DataBound

The DataBound event triggers when the data source is populated in the Pivot Table.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" >
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" DataBound="databound"></PivotViewEvents>
</SfPivotView>

@code{
    private List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void databound()
    {
        // Here, you can customize your code.
    }
}

Drill

The event Drill is triggered whenever a member is expanded or collapsed in the Pivot Table. It has the following parameters: DrillInfo and PivotView. For instance, using this event, users can alter the delimiter and drill action for the respective item.

NOTE

In this event, the parameter PivotView is returned as null due to its size.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" AllowConditionalFormatting="true">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" Drill="drill"></PivotViewEvents>
</SfPivotView>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void drill(DrillArgs<ProductDetails> args)
    {
        //args.DrillInfo --> Here you can get drilled cell information.
    }
}

DrillThrough

The event DrillThrough is triggered when a value cell is clicked in the Pivot Table during a drill-through operation. To use this event, set the AllowDrillThrough property of SfPivotView to true. It exposes the following parameters for the clicked cell: ColumnHeaders, CurrentCell, CurrentTarget, RawData, RowHeaders and Value. This event helps to view and process the raw data behind an aggregated value inside a value cell.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" AllowConditionalFormatting="true" AllowDrillThrough="true">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" DrillThrough="drillThrough"></PivotViewEvents>
</SfPivotView>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void drillThrough(DrillThroughEventArgs args)
    {
        //args --> Here you can get the information of the clicked cell.
    }
}

EditCompleted

To know more about this event, refer here.

EnginePopulating

The EnginePopulating event is available in both Pivot Table and Field List.

  • The event EnginePopulating is triggered from the Field List object whenever the report is modified in its UI.

  • Likewise, the EnginePopulating event is triggered from the Pivot Table object whenever the report is modified via the grouping bar, toolbar, and so on.

This event fires before engine framing begins and allows users to customize the pivot data source settings. It has the following parameter: DataSourceSettings.

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" AllowConditionalFormatting="true">
    <PivotViewDataSourceSettings DataSource="@data">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
        </PivotViewValues>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails" EnginePopulating="enginePopulating"></PivotViewEvents>
</SfPivotView>

@code{
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void enginePopulating(EnginePopulatingEventArgs args)
    {
        //args.DataSourceSettings --> User can modify the report before engine populates.
    }
}

EnginePopulated

The EnginePopulated event is available in both Pivot Table and Field List. To know more about this event, refer here.

ExcelHeaderQueryCellInfo

To know more about this event, refer here.

ExcelQueryCellInfo

To know more about this event, refer here.

Export and report events

ExportCompleted

The event ExportCompleted is triggered after the pivot table or pivot chart has been exported to a PDF, Excel, CSV, or other document.

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Grids

<SfPivotView @ref="pivot" TValue="ProductDetails" EnableVirtualization="true" ShowFieldList="true" ShowToolbar="true" Toolbar="@toolbar" AllowNumberFormatting="true" AllowConditionalFormatting="true" AllowPdfExport="true" AllowExcelExport="true" Height="300" Width="800">
    <PivotViewDisplayOption Primary=Primary.Table View=View.Both></PivotViewDisplayOption>
        <PivotViewDataSourceSettings DataSource="@data" ShowGrandTotals="true" ShowSubTotals="true">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
        <PivotViewEvents TValue="ProductDetails" ExportCompleted="ExportCompleted"></PivotViewEvents>
        <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
</SfPivotView>

@code{
    SfPivotView<ProductDetails> pivot;

    public List<ToolbarItems> toolbar = new List<ToolbarItems> {
        ToolbarItems.Grid,
        ToolbarItems.Chart,
        ToolbarItems.Export,
        ToolbarItems.SubTotal,
        ToolbarItems.GrandTotal,
        ToolbarItems.ConditionalFormatting,
        ToolbarItems.NumberFormatting,
        ToolbarItems.FieldList
    };
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        this.data = ProductDetails.GetProductData().ToList();
        // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    private void ExportCompleted(object args)
    {
       // Triggers when the pivot table (or) pivot chart has been exported to a pdf, excel, csv etc., document.
    }
}

FetchReport

To know more about this event, refer here.

FieldListRefreshed

To know more about this event, refer here.

FieldDragStart

To know more about this event, refer here.

FieldDrop

To know more about this event, refer here.

FieldDropped

The FieldDropped event is available in both Grouping Bar and Field List.

To know more about this event with respect to field list operation, refer here.

To know more about this event with respect to grouping bar operation, refer here.

FieldRemove

To know more about this event, refer here.

HyperlinkCellClicked

To know more about this event, refer here.

LoadReport

To know more about this event, refer here.

MemberEditorOpen

To know more about this event, refer here.

NewReport

To know more about this event, refer here.

OnActionBegin

To know more about this event, refer here.

OnActionComplete

To know more about this event, refer here.

OnActionFailure

To know more about this event, refer here.

OnLoad

The OnLoad event is available in both Pivot Table and Field List.

To know more about this event, refer here.

PdfHeaderQueryCellInfo

To know more about this event, refer here.

PdfQueryCellInfo

To know more about this event, refer here.

RenameReport

To know more about this event, refer here.

RemoveReport

To know more about this event, refer here.

SaveReport

To know more about this event, refer here.

ToolbarRendered

The event ToolbarRendered is triggered before the toolbar is rendered. This event is available only when the toolbar is enabled in the Pivot Table. It has the following parameter: CustomToolbar, which is a List<ItemModel> from the Syncfusion.Blazor.Navigations namespace. Using this event, users can add custom toolbar items as well as remove existing items from the toolbar.

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Navigations
<SfPivotView @ref="pivot" TValue="ProductDetails" ShowFieldList="true" ShowToolbar="true" Toolbar="@toolbar" ShowTooltip="true" AllowConditionalFormatting="true" AllowPdfExport="true" AllowExcelExport="true">
    <PivotViewDisplayOption Primary=Primary.Table View=View.Both></PivotViewDisplayOption>
        <PivotViewDataSourceSettings DataSource="@Data" ShowGrandTotals="true" ShowSubTotals="true">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
        <PivotViewEvents TValue="ProductDetails" ToolbarRendered="ToolbarRender" ></PivotViewEvents>
        <PivotViewGridSettings ColumnWidth="140"></PivotViewGridSettings>
</SfPivotView>

@code {
    private List< Syncfusion.Blazor.PivotView.ToolbarItems> toolbar = new List<Syncfusion.Blazor.PivotView.ToolbarItems> {
        Syncfusion.Blazor.PivotView.ToolbarItems.New,
        Syncfusion.Blazor.PivotView.ToolbarItems.Grid,
        Syncfusion.Blazor.PivotView.ToolbarItems.Chart,
        Syncfusion.Blazor.PivotView.ToolbarItems.Export,
        Syncfusion.Blazor.PivotView.ToolbarItems.SubTotal,
        Syncfusion.Blazor.PivotView.ToolbarItems.GrandTotal,
        Syncfusion.Blazor.PivotView.ToolbarItems.ConditionalFormatting,
        Syncfusion.Blazor.PivotView.ToolbarItems.FieldList
    };
    private SfPivotView<ProductDetails> pivot;
    public List<ProductDetails> Data { get; set; }
    protected override void OnInitialized()
    {
        this.Data = ProductDetails.GetProductData().ToList();
        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
    }
    public void ToolbarRender(ToolbarArgs args)
    {
        //To change text of New report button
        args.CustomToolbar[0].Text = "New Report";
        //To remove Export menu
        args.CustomToolbar.RemoveAt(3);
        //To add PDF export button
        args.CustomToolbar.Add(new ItemModel
        {
            Text = "PDF Export",
            TooltipText = "PDF Export",
            Click = EventCallback.Factory.Create<ClickEventArgs>(this, PDFButtonClick)
        });
    }
    public void PDFButtonClick(ClickEventArgs args)
    {
        this.pivot.ExportToPdfAsync();
    }   
}

NOTE

You can refer to the Blazor Pivot Table feature tour page for its groundbreaking feature representations. You can also explore the Blazor Pivot Table example to know how to render and configure the pivot table.