Getting Started with React Spreadsheet in SharePoint Framework (SPFx)

21 Jul 20262 minutes to read

This article provides a step-by-step guide for setting up a SharePoint project and integrating the React Spreadsheet Editor component.

SharePoint Framework (SPFx) is a development model and framework provided by Microsoft for building custom solutions and extensions for SharePoint and Microsoft Teams. It is a modern, client-side framework that allows developers to create web parts, extensions, and customizations that can be deployed and used within SharePoint sites and Teams applications.

Prerequisites

Set up the SharePoint project

Create a new SPFx project using the following command:

Step 1: To initiate the creation of a new SharePoint project, use the following command:

yo @microsoft/sharepoint

Step 2: Specify the name of the project as my-project and the name of the WebPart as App for this article. You will be prompted with a series of configuration questions as shown below:

Let's create a new Microsoft 365 solution.
? What is your solution name? my-project
? Which type of client-side component to create? WebPart
Add new Web part to solution my-project.
? What is your Web part name? App
? Which template would you like to use? React

Step 3: To establish trust for the certificate in the development environment, execute the following command:

gulp trust-dev-cert

With these steps complete, your my-project SharePoint Framework solution is ready for Syncfusion® component integration.

Add Syncfusion® Spreadsheet packages

To install the React Spreadsheet component package, use the following command:

npm install @syncfusion/ej2-react-spreadsheet --save

Add CSS reference

Add the following Spreadsheet and dependent component styles to ~/src/webparts/app/components/App.tsx file.

require('@syncfusion/ej2-base/styles/tailwind3.css');
require('@syncfusion/ej2-inputs/styles/tailwind3.css');
require('@syncfusion/ej2-buttons/styles/tailwind3.css');
require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css');
require('@syncfusion/ej2-lists/styles/tailwind3.css');
require('@syncfusion/ej2-navigations/styles/tailwind3.css');
require('@syncfusion/ej2-popups/styles/tailwind3.css');
require('@syncfusion/ej2-dropdowns/styles/tailwind3.css');
require('@syncfusion/ej2-grids/styles/tailwind3.css');
require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css');

Note: This example uses the Tailwind3 theme. To use a different built-in theme, replace the tailwind3.css references with the corresponding theme stylesheets. Refer to the Themes documentation for information about the available themes and the different ways to include theme styles in a React application.

Add Spreadsheet Component

Add the following code in the App.tsx file inside the ~/src/webparts/app/components folder to render the spreadsheet.

import * as React from 'react';
import { IAppProps } from './IAppProps';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

require('@syncfusion/ej2-base/styles/tailwind3.css');
require('@syncfusion/ej2-inputs/styles/tailwind3.css');
require('@syncfusion/ej2-buttons/styles/tailwind3.css');
require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css');
require('@syncfusion/ej2-lists/styles/tailwind3.css');
require('@syncfusion/ej2-navigations/styles/tailwind3.css');
require('@syncfusion/ej2-popups/styles/tailwind3.css');
require('@syncfusion/ej2-dropdowns/styles/tailwind3.css');
require('@syncfusion/ej2-grids/styles/tailwind3.css');
require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css');

export default class App extends React.Component<IAppProps, {}> {
  
  public render(): React.ReactElement<IAppProps> {
    return  (<SpreadsheetComponent/>);
  }
}

Run the project

To run the project, use the following command:

gulp serve

See Also