Getting Started with Blazor Spreadsheet Component

14 Jul 20267 minutes to read

This section briefly explains how to include Blazor Spreadsheet Editor component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI.

Prerequisites

Create a new Blazor App in Visual Studio

You can create a Blazor WebAssembly App (Standalone) using Visual Studio via Microsoft Templates or the Blazor Extension.

Install Blazor Spreadsheet NuGet Packages

To add Syncfusion Blazor Spreadsheet component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install:

Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.Spreadsheet -Version 34.1.29
Install-Package Syncfusion.Blazor.Themes -Version 34.1.29

Prerequisites

Create a new Blazor App in Visual Studio Code

You can create a Blazor WebAssembly App (Standalone) using Visual Studio Code via Microsoft Templates or the Blazor Extension.

Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Blazor Spreadsheet NuGet Packages

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install the Syncfusion.Blazor.Spreadsheet and Syncfusion.Blazor.Themes NuGet packages and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.Spreadsheet -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29
dotnet restore

NOTE

After running dotnet restore, ensure there are no error messages in the terminal. If restore fails, verify your NuGet source (https://api.nuget.org/v3/index.json) is configured, clear the local cache with dotnet nuget locals all --clear, and retry.

Prerequisites

Install the latest version of .NET SDK. If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). Also, review the System requirements for Blazor components.

dotnet --version

Create a Blazor WebAssembly App using .NET CLI

Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the Blazor WASM App Getting Started documentation.

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Blazor Spreadsheet and Themes NuGet in the App

After creating the Blazor WebAssembly App, install the required Syncfusion NuGet packages using the .NET CLI.

  • Open a command prompt, terminal, or shell.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install the Syncfusion.Blazor.Spreadsheet and Syncfusion.Blazor.Themes NuGet packages and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.Spreadsheet -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29
dotnet restore

NOTE

After running dotnet restore, ensure there are no error messages in the terminal. If restore fails, verify your NuGet source (https://api.nuget.org/v3/index.json) is configured, clear the local cache with dotnet nuget locals all --clear, and retry.

Add import namespaces

After the packages are installed, open the _Imports.razor file (typically located at the project root in a Blazor WebAssembly App) and import the Syncfusion.Blazor and Syncfusion.Blazor.Spreadsheet namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Spreadsheet

Register Blazor Service

Register the Syncfusion Blazor service in the Program.cs file of your Blazor WebAssembly App. Place the registration after the host builder is created and before await builder.Build().RunAsync();.

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

NOTE

AddSyncfusionBlazor() accepts optional configuration options such as enabling script isolation. See the Blazor service registration topic for available configuration options.

Register Syncfusion License Key

Register the Syncfusion license key in your application startup to avoid a license warning at runtime. Add the following line in the Program.cs file of your Blazor WebAssembly App, after the AddSyncfusionBlazor() call:

// Register Syncfusion license key
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

NOTE

Replace YOUR_LICENSE_KEY with your actual Syncfusion license key. For details on generating and registering a license key, see Licensing.

Add stylesheet resource

The theme stylesheet can be accessed from NuGet through Static Web Assets. Include the stylesheet reference in the <head> section of the index.html file.

<head>
    <!-- Syncfusion Blazor components theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Add script resource

The Spreadsheet Editor script can be accessed from NuGet through Static Web Assets. Include the script reference in the <head> section of the index.html file.

<head>
    <!-- Syncfusion Blazor Spreadsheet Editor script -->
    <script src="_content/Syncfusion.Blazor.Spreadsheet/scripts/syncfusion-blazor-spreadsheet.min.js" type="text/javascript"></script>
</head>

NOTE

Check out the Blazor Themes topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add the Blazor Spreadsheet component

Add the Blazor Spreadsheet component in the Pages/Home.razor file.

@page "/"
@using Syncfusion.Blazor.Spreadsheet

<SfSpreadsheet>
    <SpreadsheetRibbon></SpreadsheetRibbon>
</SfSpreadsheet>

NOTE

SpreadsheetRibbon is the optional ribbon toolbar child component of SfSpreadsheet. Omit it if you want to render the spreadsheet without the ribbon UI.

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. The output will appear as follows:

Blazor Spreadsheet

You can also experiment directly using the interactive playground below for a quick demo:

To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see Open and Save.

NOTE

View Sample In GitHub.

NOTE

Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the Blazor Spreadsheet Editor page

See Also