Number Formatting in Blazor Pivot Table Component

29 Feb 20248 minutes to read

Allows you to specify the required display format that should be used in values of the pivot table. Supported display formats are:

• Number
• Currency
• Percentage
• Custom

You can apply format for the numeric values using the following properties in the FormatSettings.

• Name: It allows to specify the field name.
• Format: It allows to specify the format of the respective field.

Possible formatting values are:

1. N - denotes numeric type.
2. C - denotes currency type.
3. P - denotes percentage type.

NOTE

If no format is specified it takes number as default format type.

Other properties include:

• UseGrouping: It allows to enable or disable the separator, for example, $100,000,000 or $100000000 respectively. By default, it will be set as true.
• Currency: It allows to set the currency code which needs to be considered for the currency formatting.

@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="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C2" UseGrouping="false" Currency='EUR'></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</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.
    }
}

You can also format the values at runtime using the formatting dialog. This option can be enabled by setting the AllowNumberFormatting property to true. The same has been discussed in some of the upcoming topics.

Custom format

You can add any custom format directly to the Format property in the FormatSettings. Custom format can be achieved by using one or more format specifiers listed in the following table.

Specifier	Description	Input	Format Output
0	Replaces the zero with the corresponding digit if it is present. Otherwise, zero will appear in the result string.	{ format: ‘0000’ }	‘0123’
#	Replaces the ‘ # ‘ symbol with the corresponding digit if it is present. Otherwise, no digits will appear in the result string.	{ format: ‘####’ }	‘1234’
.	Denotes the number of digits permitted after the decimal point.	{ format: ‘###0.##0#’ }	‘546321.000’
%	Percent specifier denotes the percentage type format.	{ format: ‘0000 %’ }	‘0100 %’
$	Denotes the currency type format that is based on the global currency code specified.	{ format: ‘$ ###.00’ }	’$ 13.00’
;	Denotes separate formats for positive, negative and zero values.	{ format: ‘###.##;(###.00);-0’ }	‘(120.00)’
‘String’ (single Quotes)	Denotes the characters that are enclosed in the single quote (‘) to be replaced in the resulting string.	{ format: “####.00 ‘@’” }	“123.00 @”

NOTE

If custom format is defined, certain properties such as UseGrouping and Currency will not be considered.

@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="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            <PivotViewFormatSetting Name="Sold" Format="####.00 'Nos'"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</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.
    }
}

Toolbar

You can enable formatting dialog option in the toolbar by adding NumberFormatting in the Toolbar. After that, you can see the option to invoke the formatting dialog in the toolbar.

@using Syncfusion.Blazor.PivotView

<SfPivotView @ref="pivot" TValue="ProductDetails" ShowToolbar="true" Toolbar="@toolbar" AllowNumberFormatting="true" Height="300" Width="800">
    <PivotViewDisplayOption Primary=Primary.Table View=View.Both></PivotViewDisplayOption>
    <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="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
    <PivotViewEvents TValue="ProductDetails"></PivotViewEvents>
    <PivotViewGridSettings ColumnWidth="140"></PivotViewGridSettings>
</SfPivotView>
<style>
    .e-pivotview {
        min-height: 300px;
        width: 722px;
    }
</style>

@code{
    SfPivotView<ProductDetails> pivot;

    public List<ToolbarItems> toolbar = new List<ToolbarItems> {
        ToolbarItems.NumberFormatting
    };

    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.
    }
}

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.