Getting Started with ASP.NET Core Pivot Table Control

23 Jul 20269 minutes to read

This section briefly explains how to include the ASP.NET Core Pivot Table control in your ASP.NET Core application using Visual Studio, and Visual Studio Code.

Ready to streamline your ASP.NET Core development? Discover the full potential of ASP.NET Core controls with AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, Code Studio and more. Explore AI Coding Assistant

Create an new ASP.NET Core Web App with Razor pages

Create an ASP.NET Core Web App using Visual Studio via Microsoft Templates or the Syncfusion® ASP.NET Core Extension. For detailed instructions, refer to the ASP.NET Core Web App Getting Started documentation.

Run the following command to create a new ASP.NET Core Web App.

Terminal
dotnet new webapp -o RazorPagesMovie
code -r RazorPagesMovie

Alternatively, create an ASP.NET Core Web App using Visual Studio Code via Microsoft Templates, or the Syncfusion® ASP.NET Core Extension, or the C# Dev Kit extension.

Install the required ASP.NET Core packages

Install the Syncfusion.AspNetCore.PivotView and Syncfusion.AspNetCore.Themes NuGet packages. All Syncfusion ASP.NET Core packages are available on nuget.org. See the NuGet packages topic for the details.

Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
Search the required NuGet packages (Syncfusion.AspNetCore.PivotView and Syncfusion.AspNetCore.Themes) and install them.

Alternatively, you can install the same packages using the Package Manager Console with the following commands.

Package Manager Console
Install-Package Syncfusion.AspNetCore.PivotView -Version 34.1.29
Install-Package Syncfusion.AspNetCore.Themes -Version 34.1.29

Open the terminal and run the following commands.

Terminal
dotnet add package Syncfusion.AspNetCore.PivotView -v 34.1.29
dotnet add package Syncfusion.AspNetCore.Themes -v 34.1.29

Add ASP.NET Core Tag Helpers

After the packages are installed, open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.AspNetCore.Base and Syncfusion.AspNetCore.PivotView Tag Helpers.

_ViewImports.cshtml

@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.PivotView

Add stylesheet and script resources

The theme stylesheet and script can be referenced from CDN. Include the stylesheet and script references inside the <head> of ~/Pages/Shared/_Layout.cshtml file.

_Layout.cshtml
<head>
    ...
    @* ASP.NET Core controls styles *@
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
    @* ASP.NET Core controls scripts *@
    <script src="_content/Syncfusion.AspNetCore.PivotView/scripts/sf-pivotview.min.js"></script>
</head>

Register the Script Manager

Open the ~/Pages/Shared/_Layout.cshtml file and register the script manager <ejs-scripts> at the end of the <body> element as follows.

_Layout.cshtml
<body>
    ...
    @* ASP.NET Core Script Manager *@
    <ejs-scripts></ejs-scripts>
</body>

Add ASP.NET Core Pivot Table control

Add the ASP.NET Core Pivot Table control in the ~/Pages/Index.cshtml file.

To bind data for the Pivot Table control, you can assign a collection of data objects to the dataSource property. The data source can be provided as an IEnumerable collection or as an instance of the DataManager.

Index.cshtml
Index.cshtml.cs
@page
@model RazorPagesMovie.Pages.IndexModel

<ejs-pivotview id="PivotView" height="350">
    <e-datasourcesettings dataSource="@Model.GetDefaultData()" expandAll="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Amount" caption="Sold Amount"></e-field>
            <e-field name="Sold" caption="Units Sold"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesMovie.Pages
{
    public class IndexModel : PageModel
    {
        public List<PivotData> PivotDataSource { get; set; }
        public void OnGet()
        {
            PivotDataSource = GetDefaultData();
        }

        public List<PivotData> GetDefaultData()
        {
            List<PivotData> DefaultData = new List<PivotData>()
            {
                new PivotData { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" },
                new PivotData { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q2" },
                new PivotData { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q3" },
                new PivotData { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q4" }
            };
            return DefaultData;
            
        }
    }
    public class PivotData
    {
        public int Sold { get; set; }
        public double Amount { get; set; }
        public string Country { get; set; }
        public string Products { get; set; }
        public string Year { get; set; }
        public string Quarter { get; set; }
    }
}

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET Core Pivot Table control will render in your default web browser.

Open the terminal and run the following command.

Terminal

dotnet run

ASP.NET Core Pivot Table Control

Search docs

Ask Syncfusion AI Assistant